Google Tag Manager - implement Facebook pixel based on DataLayer events

How to add Facebook pixel to Google Tag Manager? And fire the FB pixel with custom data on custom event and all of this based on dataLayer? Hmm sounds complicated, but it is not.
I am not going into topic what FB pixel and dataLayer are, and what for they are used, if this is not clear for you  please google it.

I assume that you already have installed Google Tag Manager on your site.

So, let's start.

1. Push event and data to dataLayer
    I want to add event postView on every page change and for example add slug name as a another param. Let's push this data into data layer
    

var DataLayerPostTags = {
          'event': 'postView',
          'slug':'slug-holding-data-param-goes-here'
        };
        window.dataLayer.push(DataLayerPostTags);

2. Set Triggers and variables in Google Tag Manager
    So now when have this pushed on every page change (it is up to you how to set it up) lets create trigger and variables in GTM.
    Google Tag Manager Trigger - is a action to which we can attach some event in GTM, like firing the pixel, or executing custom JS code or .... whatever
    Google Tag Manager Variable - is a definition of variable based on value from dataLayer or it could grabbed from page on another way (let's focus on dataLayer)
    
    In our case, we have to set the trigger to fire every time when dataLayer postView occurs.
    
    Set the Google Tag Manager Trigger
         1. inside of your Google Tag Manager interface, go to Triggers and click new
         2. Set the name and click on Trigger Configuration and select Custom Event from the list on right side
         3. Add event name, Set This trigger fires on "Custom event"
         4. Set: Fire this trigger when an Event occurs and all of these conditions are true to event->equals->postView
         5. Save. Now we have event set in GTM to fire every time when we pushed postView event in dataLayer  - sweet, isn't it?



   Set the Google Tag Manager variable based on dataLayer variable
   1. inside of GTM interface go to Variables->new
   2. add name and click on Variable Configuration and select Data Layer Variable
   3. insert  the variable name from dataLayer n field "Data Layer Variable name". In our case this is: "slug"
   4. Save it. Now we can use this Variable on our Facebook pixel container



3. Set the Facebook Pixel in Google Tag Manger
   - first we will set the basic pixel code to fire when site is opened, and then on postView event we will add another piece of code additional to existing FB pixel.
     
     Set basic Facebook Pixel code
       1. inside GTM click on Tags->Custom HTML tag
       2. paste your FB pixel code here
       3. and on triggering select AllPages, this is default event from GTM
       4. click save - now we have implemented FB pixel to fire on page load - not on dataLayer change, but every time when page is reloaded. This is especially important for Angular/React (javascript rendering) sites, because this FB will be fired only only on first page load, and every other page change triggered by JS will not fire this pixel. So that is why we are using dataLayer

  


   Set ViewContent event for Facebook pixel with custom parameter
   1. Let's create new tag, go to Tags->new
   2. set the name "Facebook ViewContent", click on Tag Configuration and select Custom HTML
   3. paste this code in HTML field:

<script>fbq('track', 'ViewContent', {
  slug:{{postViewslug}}
</script>

   4. Click on advanced settings Tag sequencing->Fire a tag before Facebook ViewContent fires and select our basic Facebook pixel from the list. Here we are saying that this tag can be fired ONLY after FB basic pixel
   5.  Now let's select the trigger, click on Triggering and select our previously created event: postView
   6. Save it. So now it is all set end done, Facebook PageView pixel will be fired on custom event passing our slug as a custom param.



Thank you.
And thank me.