Facebook custom audience pixel Standard Events implementation using Google Tag Manager!

Previously I have written a post on how to upgrade your Facebook Custom Audience Pixel using Google Tag Manager. The blog post talked mostly about the Base pixel that needs to be placed on all the pages. It included a small example about the standard event “Search”. In this post I would be explaining in detail about the other standard events (ViewContent, AddToCart and Purchase) based on Facebook custom audience pixel. We will see how to fire these on the website using Google Tag Manager (GTM).

The simple way to do this is by creating a Custom HTML tag. Place the necessary code related to the event. Fire the tag at necessary places.

Facebook follows a common syntax to fire the events and pass the parameters associated to it. It looks like this

Understanding the Facebook Custom Audience Pixel Parameters

value: Any price you assign for that particular event. If a product is being viewed this would be the product price. If an user adds a product with 2 quantity to the cart this would be 2 times your product price. If it is an order confirmation this would be the total value of the order. You can assign a value of your liking if it’s a subjective event something like Newsletter confirmation or a successful sign up.

currency: This is self explanatory. Based on your geographic location or location of your business, you can assign the respective value.

content_ids: Unique ids of Products.

content_type: Either a “product’ or ‘product_group’ depending upon content_ids being passed. If the content_ids have the values related to products then we need to use ‘product’. If it has product groups then the value should be ‘product_group’

content_name: Name of the page or product

ViewContent Event

This event needs to be fired when a product page is viewed.

Sample Code that needs to be placed

Required Parameters: content_ids, content_type
Even though Facebook says value and currency are not required it’s a good practice to pass them for all the events.

Implemeting this using GTM

Before implementing, identify the DIV id or classname of the required elements. In this case they are Product Name, Product ID, Product Price and Product Category. Ask your developer to pass in a unique id value to these elements which will make your life easy. You can also use other combinations to get to the elements though. In fact the better way would be implementing a Data Layer and pass these values.

1. Create a new Custom HTML Tag

2. Paste the above mentioned code

3. This is the most important step. Since this a page view event. We need to make sure that our base pixel tag is available by the time we fire this code. The reason is the object ‘fbq’ we use is created by the Facebook Base Pixel which we have implemented already. To make this happen we use the Tag Firing Priority feature of GTM. Assign a bigger number like 3 to the Base Pixel tag which you have implemented and a lower number to the present pixel tag. This makes sure that base pixel fires first and our code fires next.

custom html tag firing priority

 

4. Create a trigger which identifies all your Product pages. If all your product pages’ URLs have ‘/product/’ in them, you can create a new trigger with this value

custom html tag product pages

4. Assign the trigger and save the tag. Publish the changes. You are done!

AddToCart Event

This is an event which is fired when a product is added to the shopping cart.

Sample Code that needs to be placed

1. Create a new Custom HTML Tag

2. Paste the above code

3. Create a Click Trigger which identifies the click on Add to Cart button

add to cart trigger facebook custom audience pixel

add to cart trigger facebook custom audience pixel

4. Save the tag. Publish the changes.

facebook custom audience pixel add to cart event

 

Purchase Event

This event needs to be fired on the order confirmation page.

Sample code for this event looks like this

1. Create a new Custom HTML Tag

2. Paste the above mentioned code

3. This is the most important step. Since this a page view event. We need to make sure that our base pixel tag is available by the time we fire this code. The reason is the object ‘fbq’ we use is created by the Facebook Base Pixel which we have implemented already. To make this happen we use the Tag Firing Priority feature of GTM. Assign a bigger number like 3 to the Base Pixel tag which you have implemented and a lower number to the present pixel tag. This makes sure that base pixel fires first and our code fires next.

4. Configure the trigger to fire on Order confirmation page

5. Save the tag and Publish the changes.

The other standard events mentioned in the Facebook Documentation follows similar procedure depending upon the kind of event it is i.e., whether it is a page load event or a click event.

Note: All the above implementation contains pseudo code. These elements differ from site to site. If you want me to provide the code for your particular site, please leave a comment below with your site details.

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. Zoe Robinson says

    Great post, Ram! Super helpful for those of us dealing with dynamic product ad & GTM integration. Thanks for this!

  2. Lars Kops says

    Hi, nice article! Now I am wondering how you would set this up imlementing a Data Layer for ther parameters? Any help would be really appreciated.

  3. Niamh O'Connell says

    Hi Ram, thank you for posting such a useful article on how to implement the Facebook WCA upgraded pixel via GTM.

    I’m having issues with extracting values from the data layer on my product detail pages. I want to populate the content_id parameter but when I create a data layer variable that tries to pull in product id from our product pages, I get the value null returned for the View Content pixel.

    I think there might be a syntax error in the data layer which has been placed on our products pages. Do you know if there is a quick way of checking the syntax of a data layer on a specific page?

    I really appreciate the help.

    Thanks,

    Niamh

    • says

      Hi Nimah, the best way to do is, if you are using Google Chrome, Press F12. You will see developer tools that gets opened. Go to the console tab and type the name of your data layer object. Most probably it should be “dataLayer”. Type it in the console and press enter. You should see an object getting returned. If you expand the object you will have all the parameters that are getting passed into you data layer. So, if the content_id is not present inside the object it will return a null value. You can ask your web developer to fix it if this is the case.

      Else, you can provide the url of the page where you facing the issue. I can quickly check and let you know what might be the problem.

      -Ram

      • Niamh O'Connell says

        Hi Ram

        Thanks for getting back so fast. An example of URL that I’m having issues with is: https://www.customly.com/product/home/home-cushions/66

        I can see the dataLayer via the Console tool on Chrome and the naming conventions I’ve provided in the data layer variable in GTM – from what I can see – do seem to mirror the dataLayer that appears in the Console pane.

        Is there anything in the dataLayer on the URL which I provided above which might be conflicting with the data layer variable which I created as: ecommerce.detail.products.0.id

        I really appreciate the help.

        Thanks,

        Niamh

        • says

          Hi Niamh,

          The problem here is the number in the dot format you are using to pick up the value. As far as I know numbers are not supported in dot format. Can you try the following

          ecommerce.detail.products[‘0’].id

          or

          ecommerce.detail.products[0].id

          Let me know if one of this works.

          -Ram

          • Niamh O'Connell says

            Hi Ram

            Thanks for getting back so fast.

            I get the value “undefined” when I try those data layer variables. I’m not sure why. I tried all of the below and I get the value “undefined” each time:

            ecommerce.detail.products.0.id
            ecommerce.detail.products.[0].id
            ecommerce.detail.products[‘0’].id
            ecommerce.detail.products[0].id

            Thanks,

            Niamh

          • says

            Hi Niamh,

            The problem is the dataLayer is loading much later after the page is getting loaded. So, it’s better if you fire the tag or call the dataLayer element once your dataLayer is fully loaded.

            I see an event associated with this and the value is “transaction”

            So you can fire a tag with this trigger when event is equal to transaction and then you can call your dataLayer element inside your code. Please try this and let me know if this works.

            -Ram

          • Niamh O'Connell says

            Hi Ramor

            Thank you for the help. This was exactly the reason.

            I really appreciate your help.

            Thanks,

            Niamh

  4. Malte G says

    Hi Ram,

    This looks great, thanks for the article!

    So can I trigger a custom event by placing the base WCA pixel on the website and then fire a script via GTM that looks like this?:

    fbq(‘track’, ‘customEvent001’ );

    I then should be able to create a new Custom Audience list in my Facebook Ads Manager that is based on the event “customEvent001”, right?

    Thank you so much!

    Malte

    • says

      Hi Malte,

      Thanks for commenting! You are right once you have the base WCA pixel on the website, you should be able to trigger a custom event using the following code (A slight change to your code)

      fbq(‘trackCustom’, ‘customEvent001’, {Any Parameters} );

      • Eurydice Lafferayrie says

        Hi Ram,

        Thanks for the article, quite useful!
        As Malte, I implemented custom events on my website. They seem to work perfectly well, however I get this error in my console:
        “fbevents.js:9 Facebook Pixel Error: Unsupported event: eventSubscriptionClick”

        Should I worry about it, or is it just a notification that I am using a non-casual FB function?

        Thanks!
        Eurydice

        • says

          Hi Eurydice,

          Can you please paste the code you have implemented? Are you using ‘trackCustom’ in your fbq call. Unsupported event error generally occurs when you are firing an event which is not from the standard events which Facebook support. Other than those 9 events for everything else we need to use the above syntax which I have commented.

  5. marzio says

    Hey Ram, this is super useful, what is the simplest code to track a lead conversion?

    I mean i’m traking optins but i don’t know how to write the code 🙁

    any help?

    thanks

    • says

      Hi Marzio,

      The code you have written is perfectly correct. The only thing we need to make sure about is the Base Pixel to be fired before your code. So I would suggest you to assign a higher number in Tag Firing priority for your Base Pixel and a lower number to the above custom tag. That should work.

      And yeah, this needs to be fired on the Thank you Page of your conversion. Let me know if this is not clear.

      Regards
      Ram

      • marzio says

        Thanks Ram,

        So tag priority ‘3’ for Base pixel and priority ‘1’ for the Lead pixel could do the trick?

        What will happen if the base pixel and the lead pixel will fire both at the same time or else the base pixel will fire before the lead pixel?

  6. Max Kutny says

    What a nice idea to to move fb event code to a separate tag.

    But just to be strict. Even firing fb event tag after base pixel tag does not guarantee that ‘fbq’ object is created before it’s addressed in event tag, right?

    This is what GTM says about priorities:
    “Tags with higher numbers for priority will be fired first. Priority defaults to 0 if none is specified. Tags will still be fired asynchronously, i.e., a tag will be fired whether or not the previous tag has finished.”

  7. Mathieu Bontrain says

    Hey Ram,

    Great article!!!
    Look everywhere online for something similar.
    I m running a shopify store and trying to implement fb new tracking using GTM.
    You article is very thorough but I am not able to get any of values that I need returned to me (content_ids, content_type, content name, value …)
    I tried to troubleshoot using the tip you gave below (f12 and search for datalayer in the console) but I am am not even seeing any of the variables when i look through the objects.

    Please see attached screenshot.

    Thanks so much for you help.

  8. Benjamin says

    Hello! Thanks for this great article! I’ve got a problem question though. How can I do if I have several addtocart buttons on the same page? We’d need to find a way to identify what product_name id is related to the clicked button. And also, the event would fire twice which would lead to a Pixel error, am I wrong?

    I tried it (see screenshot), and this exactly happened to me. As you can see when I clicked on the 1st button, everything went fine. Then I reloaded my page and clicked on the second button but that’s the parameter of the first product that were collected.

    Finally i tried to press the two buttons without reloading and that’s how I got the Pixel activated two times.
    The problem is related. if you can find a way to differentiate the parameters when you click on one button or the other, then it wouldn’t be the same event that would fire.

    Do you think you could help me?

    Attached you can also see the codes that I’ve been using for this test.

    Thank you very much for your help, I would really appreciate it.

      • says

        Hi @benjlap:disqus

        I have understood your query. The problem here you are facing is with the JavaScript code you have written. The product_name variable is getting the information by querying the ID. The problem with ID is it always takes the first HTML element in the page. So, if there are 3 HTML elements in the page, your code always take the first element if you use document.getElemenetById.

        What you need to do here is to modify your code accordingly. You have to dynamically get the text of the product related to that particular Add to cart button.

        In you case, you can try this

        var product_name = gtm.element.nextSibling.textContent;

        gtm.element is the element which you have clicked and the nextSibling return the product after the buy now button which should work for you.

  9. says

    hello,

    What a great article! You increase my understanding about pixel.
    I tried to implement pixel using tag manager. But I get problem. Why the parameter content_name is not detected?

    the php is like in attachment. What’s your suggestions about this?

      • says

        Hi there,

        content_name is a string. You cannot pass multiple values into it. So there is no need for a for loop in your code. I would suggest you to use

        var product_name = document.querySelector(‘h1.meal-title’).textContent;
        fbq(‘track’, ‘ViewContent’, { content_name: product_name });

        Please try the above code and let me know if it works or not.

  10. Arthur Shim says

    Thanks for sharing this Ram! I am also curious about how FB and GTM handle multiple purchases. For example if a customer purchased a t-shirt and a hat, how would you pass the unique product id, name and value for those items to GTM?

Leave a Reply

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