16 Powerful Facebook Custom Events To Define Audiences & Conversions – Google Tag Manager

I’ll be showing you the step by step method to track various Facebook Custom Events. You can use it to

  • Build Remarketing List (Custom Audiences)
  • Defining Conversions  

But Wait…

It is highly recommended to set up a facebook base pixel the proper way.

If you are not confident about the Base pixel setup, check How To Set Up Facebook Base Pixel.

If you’re done with that , let’s proceed.

Here is the list of events, we’ll be tracking:

 

16 Facebook Events To Build Custom Audiences & Define Conversions

 

1.) OutBound Links

 

The steps below would be used in setting up most of the events.  

Step #1 – Input Custom HTML Code 

  • The Event Name is ‘Link Clicks’ & it has two parameters
    • name: The URL of the link clicked.
    • page: The pages on which the link was clicked
  • These parameters are optional & you are free to include/exclude it.

 

Step #2 – Tag Sequencing 

  • Go To Advanced settings > Tag Sequencing > Check Fire A Tag Before Current Tag & then include your Facebook Base Code Pixel.
    Thi is the Important Step as facebook base code tag initializes the tracker ‘fbq’, which is needed to send the event hit data to facebook servers.

Facebook Pixel - Tag Sequencing - GTM

 

Step #3 – Setup Triggers

  • Set Trigger Type as Clicks – Just Links & Fire on Click URL does not contain ‘www.your-domain.name.com’.
  • If you select Wait for Tags or Check Validation, enter Page URL matches regex .*.

Outbound Links Trigger - GTM - Digishuffle

 

Step #4 – Verify The Setup

  • Verify if the event is setup correctly through Facebook Pixel Helper.
  • Click on the link & check the ‘Event’ & ‘name’. (Here, I am tracking outbound github links)

Outbound Links Facebook Pixe Helper - Digshuffle

 

Step #5 – Create Custom Conversions & Custom Audiences

  • Go To your Facebook Pixel Page.
  • Click on
    • Create Audience or
    • Create Custom Conversions > Track Custom Conversions

Facebook - Custom Audience & Custom Conversions

  • You can define conversions by selecting the Event ‘Link Click’ & then combination of parameters.
    • Eg: Link Clicks on xyz page,  xyz link click on all pages, etc

Facebook Custom Conversion - Digishuffle

  • You can follow the similar method for Creating Audiences in facebook.

Custom Audiences Facebook - Digishuffle

 

A Better Way would be to track All Links through GTM & then filter it out in Facebook while defining conversion or building audiences 

 

2.) Internal Links

 

  • Create a Custom HTML Tag & paste

Internal Link Trigger GTM - Digishuffle

 

3.) File Download Links

 

  • Create a Custom HTML Tag & paste

  • Implement Tag Sequencing.
  • In this case, we’ll use the regex match trigger in Click URL.
  • Following is the list of regex you can use to trigger particular file format
    • PDF file —>  .pdf$
    • CSV file —> .csv$
    • PNG file —-> .png$
    • xlsx file —> .xlsx$
    • and so on…
  • If you want two or more files to match you can use
    • PDF & CSV files —> .pdf$|.csv$
    • PDF, CSV, PNG files —> .pdf$|.csv$|.png$
    • and so on..

GTM Trigger - File Downloads - Digishuffle

 

4.) Image Clicks

 

  • Create a Custom HTML Tag & paste

  • Implement Tag Sequencing.
  • Change Click URL trigger to match image format like png, jpg, jpeg, etc.
  • Use regex condition to add more formats .png$|.jpg$|.jpeg$ & so on…

Image Clicks GTM - Facebook - Digishuffle

 

5.) Button Clicks

 

  • Create a Custom HTML Tag & paste. 

  • There are 2 parameters (optional)
    • name – The button text.
    • page – The page on which the button was clicked

  • Create the trigger Some Clicks & set isButtonClicked to true.

GTM - Button Click - Trigger - Digishuffle

  • Preview the container & check the facebook pixel helper by clicking a button.

Button-CLick-Facebook-GTM-Digishuffle

 

6.) Image Hovers

 

  • Create a custom tag & paste the following code.
  • Insert CSS_selector, Timer, NAME-OF-IMAGE

  • To find CSS Selector, press Ctrl+Shift+C > Right click on Img element tag > select copy selector.

CSS-Selector-GTM-Tracking-Digishuffle

 

7.) Form Submits

 

  • Create a Custom HTML Tag & paste. 

  • Replace NAME_OF_THE_FORM with the custom name.
  • Implement Tag Sequencing.
  • Create a Form submit trigger & fire on all pages.
  • If you want to track a particular form on the particular page, you can then use page URL contains /contact-us or form ID contains xyz, etc.

Form-Submit-Trigger-GTM-Facebook-Digishuffle

 

Check here for the [NEW]updated guide:

Mega Guide To Track [All]Form Submissions in Google & Facebook Analytics

 

8.) Scroll Tracking

 

  • Copy & Paste the Scroll Tracking Script in Custom HTML tag & Trigger it on all pages.
  • Create two data Layer variable {{Scroll Percentage}} & {{Scroll Timings}}.

Scroll Percentage - GTM - Digishuffle - Google Analytics Agency

Scroll Timings - GTM - Google Analytics Agency

  • Create an another Custom HTML Tag & paste. 

  • Here, I have named the event as Scroll Tracking & included the parameters
    • Scroll Depth: What is the %Scroll of a page
    • Scroll Time: What is the time taken by user to scroll to specified %
  • Implement Tag Sequencing.
  • Trigger on event ScrollTiming.

Scroll Timing - GTM - Trigger = Digishuffle

  • Verify the Event using the plugin

Facebook Scroll Tracking - GTM - Digishuffle

 

9.) Time On Page

 

Visible Time Data Layer Variable

Hidden Time Data Layer Variable

  • Create an another Custom HTML Tag & paste. 

  • Here, the name of Event is Time On Page & included the parameters
    • Page Visible Time: Time for which your web page was visible in the browser tab.
    • Page Hidden Time: Time for which your web page was hidden in the browser tab.
  • Trigger the above Custom HTML tag with ‘sendTimings’ custom event.
  • Implement Tag Sequencing.
  • Verify the tag using the pixel helper plugin

TimeOnPage-GTM-Facebook - Digishuffle

 

10.) Pages / Sessions

 

  • Create a GTM variable with variable type ‘1st party cookie’ & cookie name ‘pv_per_sess’.

  • Create a Custom HTML Tag & paste. 

  • Here, the name of Event is PageviewsPerSession & included the parameters
    • Pages Viewed: Number of pages viewed until the browser is closed.
    • page: page viewed by the user.
  • Implement Tag Sequencing.
  • Verify the event through pixel helper

Facebook - PagesperSessions - GTM - Digishuffle

 

 

11.) User Lifetime Value (LTV)

Lifetime value is a more valuable metric if you are running an eCommerce site.

Here, we’ll first understand the tracking process behind LTV.
Let’s say…..

  • A user purchases a product worth 100$.
  • The cookie is stored in his browser as LTV=100$
  • Later on, with the same browser, he does 2nd purchase worth 100$.
  • Now, LTV becomes 200$.

Below image will summarize the things.

Lifetime Value - Facebook Custom Event

 

Step – 1 : Create Custom HTML in GTM

Create Custom HTML & paster the following code

 

  • Here, you have to populate the {{Revenue}} variable in GTM.
  • Cookie name is ‘c_ltv’, you can change if you want to.
  • Cookie duration is 2 years. So if the user makes the consecutive purchase within 2 yrs, the cookie will never expire.

 

Step – 2: Implement Tag Sequencing.

‘fbq’ variable should be initialized before firing any facebook event. Make sure to fire facebook pixel tag before firing any event tag. Here is the configuration below.

Facebook_-_Tag Sequencing

 

Step – 3: Create a Revenue Variable

I’ll leave it open for you to create {{Revenue}} variable. You can use DataLayer, Custom Javascript, DOM element, etc.
Here’s an image if you have implemented enhanced e-commerce via dataLayer

Revenue_-_Enhanced_Ecommerce_-_GTM

 

Step – 4: Create Trigger on Purchase

Fire the above custom HTML tag on success page or e-commerce transaction success event.

Transaction-success - GTM event

 

Step – 5: Verify the Tag Event

Lastly, use the facebook debugger plugin to check the event. Try test purchases & check, if the revenue gets added on.

Facebook_LifetimeValue - Debugging

 

Step – 6: Create Custom Conversions or Custom Audiences

Facebook needs to collect data of the events defined before it can display it in the interface. You can check later on & define the custom conversions or custom audience as per your needs.

Custom_Conversion - Facebook

 

12.) Pageviews / User

In the past example, we saw pages/sessions event, which is a session level metric rather than user level.
Here, you can record the total pages viewed by the user in his/her lifetime.

Step – 1: Create Custom HTML in GTM

Paste the following code in Custom HTML – GTM

  • Here, Cookie Duration is kept as 2 yrs. So, the cookie will never expire, if the user does a consecutive pageview within 2 yrs.

 

Step – 2: Implement Tag Sequencing.

Step – 3: Trigger the Above tag on All Pages.

Step – 4: Verify the Tag

You can check your facebook pixel debug plugin for the events.

PageviewsPerUser - Facebook Custom Event

 

 

13.) Element Visibility

This would be based on recent GTM update. Now you can track a DOM element visibility.

So, if you have a specific banner, form, GIF, Offer Text, etc you can track if the user viewed the element & for how long it was visible to the user.

 

Step – 1: Enable GTM Visibility Variables

Go To Variable > Built-In Variables > Enable Percent Visible & On-Screen Duration Variable.

GTM_Visibility_Variables

 

Step – 2: Create Element Visibility Trigger

 

Go To Triggers > Create Element Visibilty Trigger

Visibility_Trigger - GTM

 

Fill In the Element ID you want to track. Check the below configuration.

  • You can even choose the minimum percent visibility of element, when the event would be triggered.
  • You can set the duration of visibility.
  • For more info about this trigger, you can check here.

Element_Visibility_-_GTM

 

Step – 3: Create Custom HTML Tag.

Now create custom HTML tag & paste:

 

Step – 4: Implement Tag Sequencing

Step – 5: Fire Tag on Visibility Event

Fire the Tag with an event trigger with the name ‘gtm.elementVisibility’

Element_Trigger - GTM

 

Step – 6: Verify the tag

 

 

14.) Source, Medium & Campaign – UTMs – First Attribution

In Google analytics, you can create the remarketing lists knowing the user’s previous source, medium, campaign. Let’s try to replicate the same functionality in facebook. We’ll look at

  • First Attribution – Initial Source will take precedence.
  • Last Attribution – Last source will take precedence

Let’s start with the first attribution & understand the coding process:

  • When the user lands on your website with utm tags, facebook event will fire with UTM parameters source, medium & campaign.
  • When the user lands directly, the Facebook event will fire source as ‘direct’ & medium as ‘none’.
  • When the user lands from other sites, referrer would be used as source & medium as ‘organic‘.
  • UTMs will only be stored for 1st user visit & will not be overridden. (First Attribution)

 

Step – 1: Create Custom HTML Tag

Paste the below code to track UTMs

 

  • Name of the Cookie is ‘fb_utm’ 
  • Cookie Age is 6 months.
  • Feel Free to change as per your needs.

 

Step – 2: Implement Tag Sequencing

Step – 3: Trigger on All Pages

Step – 4: Verify using Facebook Plugin

  • You can try putting utms in the url & check the ‘UTM’ Event parameters.

Facebook UTM - First Attribution Script

 

 

15.) Source, Medium & Campaign – UTMs – Last Attribution

In this model, UTMs will get overridden. So..

  • When user lands on your site from Google via organic, event parameters will be
    • Source: google.com
    • Medium: organic
  • Later, when the user lands on your site with utms, they would be used as event parameters. For Eg: www.digishuffle.com?utm_source=facebook&utm_medium=cpc&utm_campaign=fb_book
    • Source: facebook
    • Medium: cpc
    • Campaign: fb_book

 

Step – 1: Create Custom HTML

Paste the following code:

 

Step – 2: Implement Tag Sequencing

Step – 3: Trigger on All Pages

Step – 4: Verify using Facebook Plugin

Here, I have landed on site via google search

Facebook_UTM_-_Last_Attribution

Then, I landed on site via facebook ads

Facebook_UTM_-_Last_Attribution_

 

Step – 5: Create Custom Audiences

  • Users who came via Facebook Campaign.

 

Facebook_Custom_Audience_-_Remarketing

 

  • Users who came via google organic

Organic_Traffic_-_Facebook_Targeting

 

16.) Video Tracking

We can now track embedded videos on websites within seconds. Thanks to the new feature in GTM.

Here, we’ll track 3 parameters, namely

  • Video Title
  • Video Percentage Watched
  • Video Current Time

 

Step – 1: Configure Video Variables in GTM

 

Go To GTM > Variables  > Enable Video Title, Video Current Time, Video Percecntage.

Video_Tracking_Facebook

 

Step – 2: Create Video Trigger

Create Video Trigger with the following configuration. (change as needed)

Video_Trigger_-_GTM

 

Step – 3: Create Custom HTML Tag

 

 

Step – 4Implement Tag Sequencing

Step – 5: Fire Tag on Video Event

Create a custom event trigger ‘gtm.video’

GTM_-_Video_Trigger

 

Step – 6: Verify the Tag via Facebook Plugin.

 

Summary:

  • Facebook has a very large audience base which is useful for remarketing.
  • It has very little segmentation functionalities for remarketing.
  • Make sure to verify the above events after setup & also change them as per your niche.
  • Implement a combination of events to create more powerful Remarketing Lists. Eg: Organic users with LTV > 500$, etc
  • Feel free to add/discuss new ideas in comment. 🙂

 

Note: In some IE Browsers, you might get “https://gtm-msr.appspot.com/render2?id=GTM-XXXXX” as the event page in the Facebook dashboard.
Use,

if((document.location.href.search(‘appspot.com‘)==-1)&&(document.referrer.search(‘appspot.com‘)==-1))

{   FB_CODE    }

 

More Links:

Super Guide To Enhanced Ecommerce Tracking via Google Tag Manager [2018]

Automated Cost Data Import – Facebook To Google Analytics

Advanced Guide To Cohort Analysis in Google Analytics

How To Track Multiple Funnels in Google Analytics (Analytics Hacks)

Dynamic Remarketing Code Setup – Analytics & Non-GTM

Ritwik is a Web Analyst & Product Marketer. He loves to write technical & easy to understand blogs for Marketers & Entrepreneurs. Focused on Google Analytics, Facebook Analytics, Tag Management, Marketing & Automation Scripts & more. Google Certified Professional. A Firm Believer in Teaching -> Learning -> Growing. :)

Comments (31)

  1. Hi Ritvik,

    Please provide in details for Scroll Custom Audience.

    1. Hi Sameer,

      I have updated some points, hope they would be helpful.

  2. Hello, how do I define the ‘PagesPerSession’ variable? I imagine I can read it from the cookie ‘pv_per_sess’, or is there another way?

    1. Yes…you are right..!! I have updated the GTM variable creation part. Thanks for pointing it out.!!

  3. Amazing list. Unfortunately, I can’t get the time on page to be transferred to the pixel.. only the page will be shown. In the datalayer it is clearly visible but the variable itself goes by undefined. I quadruple checked the spelling and scripts now.

    Any ideas?

    1. Hi Maxi,

      Try reloading the page & immediately cancel it. (pressing F5 + then Esc). Then check the events in GTM debugger or in Facebook Pixel helper plugin

      Thanks

      1. Unfortunately no, because my custom conversion and audience is empty aswell.

        Another issue that came up recently is:
        “redirect from has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’.”

        Might be me uploading the pageviews and scrolling data to GA.. If I could only wrap my head around where something went wrong, it would all be so much easier 😀

        1. Hey Maxi,

          Did you trigger the Facebook Time on Page custom HTML on event ‘sendTiming’ ? I have updated that point now.

          Thanks

          1. Thanks, yes I did.. Seemed to be a caching error.. my error 🙁

            What is the best approach with google tag manager if someone would use all 10 custom events? Wouldn’t it load the pixel multiple times? Would you put all triggers together somehow?

  4. Great stuff. Could the CSS selector be used for iFrame’s buttons?

    1. I guess No… I am not sure though.!!

  5. Hi, what is the metric used for time on site event? Seconds, Ms or else? Thanks 🙂

    1. Hi @ChrisVelev:disqus ,
      Its milliseconds. (y)

      1. Thanks 🙂

  6. Hi. After implementing the steps for 5) Button Clicks, I tried to publish the tag and get these following errors ( see them in the image attached). Do I need to publish these settings to make them work ?

    https://uploads.disquscdn.com/images/467a1f12c4ea837052d78fd685d394c89b48ecb72612c0334db22ab04d3dc5b7.png

    Also, when checking if the pixel is fired for the website, the pixel associated with the “Button Click” does not appear unless I click on the button. Here is what it looks like in the Facebook Pixel Helper

    https://uploads.disquscdn.com/images/22a7fab3f5317144cef8162adfe1274f1fe594ce413f84beb7bcbcbb70ff5731.png

    Moreover, I tried to create the custom conversion for people who click on the button using the event “Button Click” but it seemed like the event did not appear for me to choose.

    I am a bit confused about these steps. Hope you can enlight me 🙂 Thanks

    1. Hi Ashley,

      The GTM variables {{Click Element}} & {{Click Text}} need to turned on.
      In GTM, Go To Variables > Configure > Enable Click Element & Click Text.

      Thanks 🙂

      1. Hi Ritwik,

        In Facebook Pixel Helper, It looks like the two parameters page and name is not sent after my setup.

        https://uploads.disquscdn.com/images/22a7fab3f5317144cef8162adfe1274f1fe594ce413f84beb7bcbcbb70ff5731.png

        When I create custom conversion on facebook, I can only use the parameter “page”

        https://uploads.disquscdn.com/images/4a3ffd6523a041f091e2b4ba2109fa90be3d5c4458b96ef11b634ec5ba223e8f.png

        I want to create a custom conversion to track which button is clicked in my landing pages, so I have to use the parameter “name” right ? But I cannot find it. Hope you can help 🙂

        Asley

        1. I guess you are using ‘buttonText’ as custom params. It takes some time to show up in FB dashboard.

  7. Thanks for the article. I feel like I’m missing something though. I am trying to track an outbound link (no optional params, using GTM to trigger it). However, my custom event name is not showing up inside Facebook when I try to create a custom conversion. It only offers PageView

    If I just type the event name after choosing “event”, the “next” button remains inactive, so I can’t move to the next step. I used the Facebook pixel helper extension and it does show it firing.

    If you have any ideas it would be very appreciated.

      1. Thanks. Yeah. It showed up the next day. Thanks.

  8. Completely out of my depth here. I installed a Facebook Pixel, and the automatic setup selected two standard events related to checkout and quantity, which is great.

    I’d like to add some more meaningful ones to the list, but without going full retard. What is a great event to be monitoring for people selling furniture online?

    1. Hi Sacha,

      It depends on your goals. I would suggest LTV, Pageviews/User, Acquisition Source/Medium/Campaign, All Ecommerce Events (standard events), etc.

      Also, if you use any CMS like shopify, there are readily available plugins for ecommerce/standard events.
      Lastly, Follow Jon Loomer for more advanced facebook strategies.

      You can check more @: https://www.digishuffle.com/blogs/facebook-custom-events/

      Thanks,
      Ritwik

  9. Thanks for this — this is awesome. One questions regarding:

    “Note: In some IE Browsers, you might get “https://gtm-msr.appspot.com/render2?id=GTM-XXXXX” as page in Facebook dashboard.
    Use,

    if((document.location.href.search(‘appspot.com‘)==-1)&&(document.referrer.search(‘appspot.com‘)==-1))”

    I’m seeing this in my FB dashboard; where do I insert this?

    1. Insert this around any facebook custom HTML event code you are implementing/

      For Eg: For Outbound Clicks the code would be

      if((document.location.href.search(‘appspot.com‘)==-1)&&(document.referrer.search(‘appspot.com‘)==-1))
      {
      fbq(‘trackCustom’,’Link Clicks’,{‘name’:{{Click URL}},’page’:{{Page URL}}})
      }

      Thanks,
      Ritwik

  10. Hey Ritwik,

    Regarding # 9 Time On Page.. I’ve done all points as mentioned. Just facing issue with creating custom audience in Facebook.

    I’m unable to get any setting in custom audience with condition like “Visitors on homepage with more than 3 seconds”

    What is the best way to setup custom audience when “visitors on X page with more than Y seconds time on page”?

    Thanks
    Ian

      1. Hi Ritwik,

        Yes, it working now. Thank you very much.

        Regards,
        Ian

  11. Hi Ritwik,

    Thanks for this!

    For #9, is there a way to get information on other source/mediums like Google CPC?

    Thanks

  12. Hi great page the rest of the site too.

    2 things

    I was trying to get the scroll tracking and timing to work and got invalid script error. Is this depreciated now that these are inside tag manager. I really like that since I can tell if they read the page.
    Think I fixed this one. Forgot to add script tags to the copy and pasted code.

    That person also has another script that would be great since I have a client whose AVG time on site is 30 min. I think they log in and let it sit all day but would love to give them some stats on exactly whats happening. Have you tried that script?

  13. Hey Ritwik, great stuff here, thanks!

    I have a question for 15.) Source, Medium & Campaign – UTMs – Last Attribution:
    After implementing the code&tag i’m getting two UTM parameters/events, one is working fine and the other one shows an error:
    https://uploads.disquscdn.com/images/dce77f908586048caf7116076e377c3c92274de10b0bb88a6fc22b3ffb534e49.png

    Any ideas why?

    It is inside our testing environment.

    When i remove the utm cookie tag from our page, both UTM parameters/events disappear.

    Thanks!

Leave a Reply

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