Facebook pixel conversion tracking

Questions
1

We need to implement the Facebook conversion pixel in our solution. This will track events like “add to basket” and transactions and their revenue. Are there any add-ons or code examples out there that we could use to speed-up the work?

Litium version: 6

2

Do you mean example on EventBroker firing or Facebook conversion parts?

3

I guess both :thinking:

Basically we want to track as many of the events as possible within the FB conversion pixel framework;
https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking/

I am curious to hear if there are any best practice or framework for setting this up or if we should simply just add the code to our solution.

The FB events that are most important for us are Purchase and AddToCart.

Thanks,
Micke

4

I think you can do this by the tracking service that exists in litium.

Here comes an untested example that I think will help you how you should think of building this. The example is devided into two different classes, one event listener and the actual script generator that generates the script that is pushing the data to facebook.

An event listener that listen on target group event (target group event is triggered by users action on the site).

using System;
using Litium.Web;
using Litium.Web.Customers.TargetGroups;
using Litium.Web.Customers.TargetGroups.Events;
using Microsoft.Extensions.DependencyInjection;

namespace Litium.Tracking.Facebook
{
    internal class TrackingServiceTargetGroupProcessorEventListener : ITargetGroupProcessor
    {
        private readonly IServiceProvider _serviceProvider;

        public TrackingServiceTargetGroupProcessorEventListener(IServiceProvider serviceProvider)
        {
            _serviceProvider = serviceProvider;
        }

        public void Process(TargetGroupContext context, ITargetGroupEvent targetGroupEvent)
        {
            var orderEvent = targetGroupEvent as OrderEvent;
            if (orderEvent != null)
            {
                _serviceProvider.GetRequiredService<TrackingScriptEventService>().TrackEvent("facebook:order:created", orderEvent.Order.ID);
            }
        }
    }
}

The tracking script generator that should generate the script that will be injected on the page to push data to facebook.

using System.Text;
using Litium.Foundation.Modules.ECommerce;
using Litium.Websites;
using System;
using Litium.Web;

namespace Litium.Tracking.Facebook
{
    public class FacebookTrackingScriptGenerator : TrackingScriptGenerator
    {
        private readonly TrackingScriptEventService _trackingScriptEventService;
        private readonly ModuleECommerce _moduleECommerce;

        public FacebookTrackingScriptGenerator(TrackingScriptEventService trackingScriptEventService, ModuleECommerce moduleECommerce)
        {
            _trackingScriptEventService = trackingScriptEventService;
            _moduleECommerce = moduleECommerce;
        }

        public override string GetBodyEndScript(Page page, object data)
        {
            var script = new StringBuilder();

            if (_trackingScriptEventService.IsEventTracked("facebook:order:created", out var eventData)
                && eventData is Guid orderSystemId)
            {
                var order = _moduleECommerce.Orders.GetOrder(orderSystemId, _moduleECommerce.AdminToken);
                if (order != null)
                {
                    script.Append("trackFacebookOrder(orderDataValues);"); // Change to the real implementation that with trigger facebook to see the event. 
                }
            }

            return script.ToString();
        }

        public override string GetBodyStartScript(Page page, object data)
        {
            return null;
        }

        public override string GetHeaderScript(Page page, object data)
        {
            return null;
        }
    }
}
5

Great - I think this will be very helpful for the team. Thanks a lot Patric.