Facebook Custom Audience Pixel implementation using GTM Data Layer?

In one of the earlier posts, I have written on implementing Facebook Custom Audience Pixel’s Standard events using Google Tag Manager. It was about¬†writing JavaScript inside Custom HTML Tag. The values of the parameters too were picked up using JavaScript.

Facebook Custom Audience Pixel Standard Events implementation using GTM Data Layer

In this post let us use GTM’s in built Data Layer capability and see an example on how to implement the Standard Events.

Implement the Base Pixel as shown in an earlier post on how to upgrade Facebook Custom Audience Pixel using Google Tag Manager.

Give proper directions to your Developer in implementing the Data Layer related to each standard event. See the example below.

ViewContent Event

Ask your web developer to push needed values into the Data layer as shown in the below code.

 

Create Data Layer variables on GTM for each of the above data point as shown in the below image

facebook custom audience pixel productName_datalayer

Now that you have the above data layer variables created on GTM console, they are ready to be used in the code.

Create a Custom HTML tag for the ViewContent Event

Add the below code in the code section.

Assign a lower number in Tag Firing Priority than the Base pixel.

The most important thing is the trigger which fires this tag. Observe the dataLayer push we have asked our developer to code. There is an event we are passing into it and we named it as fbqViewContent.

We will use this in the triggers section. Add a trigger to the tag which is as shown below.

facebook viewcontent trigger

That’s all. You are all set. You need to follow similar procedure for other kind of events too. Comment below if you face any issues in the above process.

Ram Manohar

Author: Ram Manohar

Independent Digital Analytics and Tag Management Consultant. Web Analytics Expert with 8+ years of experience. Well versed in Digital Analytics, Web Programming, WordPress and Digital marketing. Contact me for consulting!

Comments

  1. Lars Kops says

    Awesome Ram,
    thanks for this quick explanation! I will try it in the next couple of weeks and let you know how it went. Thanks again!

  2. Lars Kops says

    Hey Ram,
    I have some questions. The example mentioned above is only for the viewcontent event, right? What about add to baste or purchase event? How do I make sure these events are on the matching website? So that the pixel fires only when somebody actually buys something?

    Sorry if this is trivial but I really want to understand the concept. Thanks in advance,

    • says

      Hi Lars,

      You are right. This is only for ViewContent pixel. For other kinds of events like Add to Cart for example, you need to ask your developer to do a dataLayer.push when the product is added successfully with required parameters like product name, id, price and stuff with ‘event’ : ‘fbqAddToCart’ and modify the above things accordingly. So that you can create a new trigger for Add to cart event using the event value as fbqAddToCart.

      Let me know if this sounds okay else I can elaborate it if you need.

      -Ram

      • Lars Kops says

        Hey Ram,

        thans again for the quick reply. Is there no way I can set up the events like AddtoCart by myself via GTM using regex?

          • says

            Hi Lars,

            I am really sorry for the delayed reply. You can do that using GTM, since the present post is about the implementation using Data layer.

            But it is not necessary for the developer to set the event type. This can be done from GTM with some tweaks. If you can provide me the URL on which you are trying to achieve this, I can explain it more clearly.

            Regards
            Ram

          • says

            Hey Lars,

            I have just tried adding a product on the website. This is the url I have used https://www.makerist.de/courses/grundkurs-verlockende-overlock I don’t see any AddToCart tag firing as of now. Since you have asked how to do it from GTM. Here is how I would do it. This is by writing a JS code and fire it on all the product pages. If you don’t want to write the code, you can use GTM’s firing rules to use Click and match the element type as button and element class as the class name of the Add To Cart button of your website and paste the fbq code inside your Custom HTML tag.

            $(‘button.m-call-to-action-button_large’).click(function(){
            fbq(‘track’,’AddToCart’, {
            //Parameters You want to pass using your Data Layer or you can write custom JS code to pass these values.
            });
            });

            Please let me know if this is not clear.

          • Lars Kops says

            Hey Ram,

            thanks again. Our developers finished the events. But when I try to fir the HTML tag on the viewconten event nothing happens. Would you mind taking a look?

          • says

            Hey Lars,

            I just visited this webpage https://www.makerist.de/courses/grundkurs-verlockende-overlock and I see a ViewContent pixel getting fired but that is being fired from the code that is present on the Page source code.

            But the code which you are interested is the dataLayer push done by your developers which has a syntax mistake.

            This is the code your developers had written which has an extra pair of Curly brackets. Please ask them to remove those extra curly brackets which should send the dataLayer push correctly to GTM.

            Also I wanted to understand
            1. Are you trying to initialize the Facebook pixel from the page source code, if so your pixel initialization should be above your dataLayer push and GTM code snippet.
            2. Also if you want to fire the ViewContent pixel from GTM using the Initialization from page source code, use window._fbq() instead of fbq().

            Let me know if this makes clear.

          • Lars Kops says

            Hey Ram,
            I am done implementing and so far it looks good. I also understand the click and match process with GTM you described.
            Thank you very much for your posts and answers. You really helped me big times! I appreciate it. Have a great day and keep up the awesome work.

  3. darleenw says

    Hi — how can we use this to create Dynamic Facebook Ads — with catalog uploaded to Facebook?
    Within GTM – we are getting stuck. DO we first need to push the information to the data layer to tag correctly? What are we missing? We are using Shopify

    • says

      Hi Darleen, I think I misunderstood your question earlier. The best way to do this is
      1. Upload your Product Catalog to Facebook first
      2. Associate your pixel with the product catalog
      3. Send the DPA events (ViewContent, AddToCart, Purchase) for all the products.
      4. Make sure the product_id is same in the product catalog and also in the DPA events.

      Regards
      Ram

  4. darleenw says

    HI — This is all great information. We are attempting to do this with Shopify, but have not found a method of doing the data layer push for each product. Seems where all getting stuck.
    The rest makes perfect sense. Do you have any ideas or knowledge of how to do this?
    Thanks

    • says

      Hi there,

      Thanks for stopping by and commenting. Since you are talking about sending different product information to Facebook, you don’t need to upload the catalog. All you need to do is send the product information dynamically everytime in the tag. This can either be done using Data Layer or using some JavaScript and jQuery from GTM itself.

      If you can let me know the URL on which you are trying to achieve this with one example, I can explain you with better clarity.

      Regards
      Ram

  5. Aaron Harris says

    I’ve done something similar for a webstore, but I’m wondering what the specifics are for sending content_ids and content_name in the Purchase event when there are multiple products. I wrote custom javascript variables that go through the datalayer product array and outputs id/name to their own arrays, but I haven’t seen anywhere at all that shows that Facebook will actually accept content_name as an array. But the Facebook developer guide looks like it accepts content_ids that way…

  6. Benjamin says

    Hello! Thank you very much for the tip. However I’m trying to generate the parameters automatically instead of having to type it each time in raw text. Because then I don’t really get the point to use a datalayer when you could just type the parameters manually into each standard events.

    Problem is I’m really bad at javascript, jQuery etc. so I just can’t figure how to do it. Maybe you could help me?

    This is for an AddToCart event.

    Here is the html for the button:

    Ajouter au panier 2

    the tag to push into the datalayer:

    $(‘a.btn btn-primary custom-button red-btn’).click(function() {
    dataLayer.push({
    ‘event’:’pushPixelEvent’,
    ‘contentName’ : $(this).attr(“id”)
    }
    });

    and the event:

    fbq(‘track’, ‘AddToCart’, {
    value: 10.00,
    currency: ‘EUR’,
    content_name: {{contentName}}
    });

    As you may have guess, I’m just trying to do it with a fake example on my website, but still I’d be very excited to make it work.

    Thanks a lot in advance!

Leave a Reply

Your email address will not be published. Required fields are marked *