Facebook Pixel Event for Time Spent on Site

Abstract Image

This tutorial covers how to create a custom Facebook pixel event based on the time spent on a page of your website. When a user spends 30 seconds on the page, the event triggers. It is further triggered when the user spends 60, 90, 120, 150 and 180 seconds on the site.

We will cover:

  • Create the Facebook pixel event. We use Google Tag Manager for this;
  • Create custom conversions based on these events; and
  • Add columns to our ad reports to show data related to these conversions.

Creating these custom events will help us understand the quality of our traffic. With this data, we create custom audiences.

The Facebook Pixel

I am assuming you have the Facebook Pixel installed on your site. If not, do this first.

I am also assuming you have:

GTM - Create a Trigger

We want Facebook to fire an event for every 30 seconds a visitor is on the page. For this, we need a trigger. Log in to your Google Tag Manager (GTM) account and create a new Trigger.

Create new trigger

Name the new trigger 'Timer 30, 60, 90, 120, 150, 180 seconds'. Configure the trigger as a Timer Type.

Name the Event Trigger
  • Set the Interval to 30 000 milliseconds (30 seconds).
  • Set the Limit to 6.
  • Enable when Event matches RegEx = .*
  • Fires on All Timers
Configure the timer

Save the event.

We need the Facebook Pixel to record the Event Number and Interval. Use these values in the Tag (explained later in this article). To record number and interval values we use variables in GTM.

GTM - Create Variables

In GTM select Variables → New. The variable will be of type Data Layer Variable.

New GTM variable
  • Name this variable DLV – gtm.timerEventNumber with a Data Layer Variable Name of gtm.timerEventNumber. This will hold the Event Number.
  • Create a second Data Layer Variable. Name it DLV – gtm.timerInterval. This will hold the Event Interval.
GTM variable type
GTM name the variable
GTM saved variable
Google Tag Manager variables created

We will now create the Tag.

GTM - Create the Tag

In GTM create a new Tag.

Google Tag Manager - new tag
  • Name the Tag 'FB – Track – 30 Seconds or more' and tag type 'Custom HTML'
GTM - Custom Tag type
  • Into the HTML block, paste the following code:
var timeOnPage = ({{DLV - gtm.timerEventNumber}} * {{DLV - gtm.timerInterval}}) / 1000;
fbq ('trackCustom', 'Time Tracking', {'Time on page': timeOnPage + 'seconds', 'page': '{{Page URL}}'});
script tag
  • Under 'Advanced Settings', 'Tag Sequencing', set the FB Base Code to fire before FB - Track - 30 seconds of more.
Google Tag Manager - tag sequencing
  • Set the Trigger to be the Timer we just created. 'Timer 30, 60, 90, 120, 150, 180 seconds.' Save the tag.
GTM tag trigger

We can now test the new Tag.

Test the Tag

In the GTM console, top right corner, click 'Preview'. The debugging process starts. The debug process first checks for errors. If there are any, the errors will show at this point.

preview GTM tag

If there are no errors the 'Start Tag Assistant' dialogue shows. Enter your website address and click Start. Two things happen.

  1. Your website opens in a new browser window. A dialogue shows - 'Debugger Connected'.
  2. The Tag Assistant 'Connected' dialogue shows in the initiating window. Click 'Continue'.
GTM debug dialogue

In the Tag Assistant window, the tags that have fired show. Here we see the FB - Track - 30 seconds or more event has fired.

GTM event fired

Go to your Facebook Business AccountEvent Manager. Here you should see the Time Tracking event as Active.

Facebook Business Events

All is well. In GTM we now submit the new tag, variables and trigger. Click 'Submit', enter a version message and save. As a final check, open your site in Google Chrome. Check the Facebook Pixel Helper to see if your new tag is firing.

Facebook Pixel Helper dialogue

Next we will create custom conversions and add the conversion data to our Facebook Ads Report.

Facebook Business - Create Custom Conversions

TODO - Copy for custom conversions.


The following excellent references helped me write this article.



Is this we can do on website directly without using tag manager

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.