Create the Ultimate Facebook Pixel Event for Quality Traffic: Time and Scroll

During the past couple of weeks, I’ve walked you through how to create custom Facebook pixelpixel events that allow you to track, optimize for, and target visits based on time spent on a page and scroll depth. Today, we’ll take that a step further and combine the two.

The reason for this is simple. While both time on a page and scroll depth are good indicators by themselves of visit quality, they each have a weakness. You can spend three minutes staring at the title without scrolling (or simply load the page and walk away). You can scroll through a post in 10 seconds and not spend any time reading it.

Several people asked me whether the two can be combined, and I have good news: They can!

Today, we’re going to isolate that ultra-valuable audience of people who scroll at least 70% of a blog post AND spend at least two minutes reading it. If you read either of the past two weeks’ posts, portions of this post will be repetitive. But I want to be sure that, if you missed those posts, you know how to set up the base pixel in Google Tag Manager and test the events.

Add the Base Facebook Pixel

I assume you have the base Facebook pixel code already installed on your website. Just in case, let’s walk through this anyway.

We’re doing this within Google Tag Manager. While there are likely ways to do it elsewhere, the variables and triggers provided by GTM make it easier to execute.

1. Create a tag and name it “Facebook – Base Pixel.”

2. Choose “Custom HTML” as the tag type under Tag Configuration.

3. Paste your base pixel code in its entirety within the HTML text box. Below is an example, but you should use your own code unique to your ad account.

Facebook Pixel GTM

4. Under Triggering, we want our base pixel code to execute on all pages of our website.

Facebook Pixel GTM

Create Variables

There are a couple of variables that we created during the past two weeks that we’ll use here. If you haven’t created them yet, let’s do that now. We need the pixel to record the percentage scroll depth and time on a page, so we add variables in Google Tag Manager.

1. Create a variable called “DLV – gtm.timerEventNumber” using the Data Layer Variable type. Use the data layer variable name “gtm.timerEventNumber.”

Facebook Pixel GTM

2. Create a variable called “DLV – gtm.timerInterval” using the Data Layer Variable type. Use the data layer variable name “gtm.timerInterval.”

Facebook Pixel GTM

3. Create a variable called “DLV – gtm.scrollThreshold” using the Data Layer Variable type. Use the data layer variable name “gtm.scrollThreshold.”

Facebook Pixel Event Scroll Depth

Create Scroll Depth Trigger

We want Facebook to fire an event as a visitor progresses on a page related to scroll depth.

1. Create a new trigger in Google Tag Manager and name it “Blog – Scroll to 50%.”

2. Select the “Scroll Depth” trigger type.

3. For vertical scroll depths, use percentages of 50, 60, 70, 80, 90, and 100.

4. Enable this trigger on “Window Load (gtm.load).”

5. Set to page path contains “/blog/”. I’ve decided to focus only on blog posts, but this is again optional. You could skip this step and it would execute on any page.

Facebook Pixel Event Scroll Depth

Create a Timer Trigger

We want Facebook to fire an event for every 30 seconds a visitor is on a page.

1. Create a new trigger in Google Tag Manager and name it “Blog – 30, 60, 90, 120, 180 seconds.”

2. Select the “Timer” trigger type.

3. For interval, use 30000 milliseconds (30 seconds). You can use a different interval if you please.

4. Set a limit of 6. Again, this is optional, but in my case I wanted to record events at 30, 60, 90, 120, 150, and 180 seconds.

5. Set to page path contains “/blog/”. I’ve decided to focus only on blog posts, but this is again optional. You could skip this step and it would execute on any page.

Facebook Pixel GTM

Create a Trigger to Combine Scroll Depth and Time Spent

We want Facebook to fire an event when a visitor spends at least 120 seconds and scrolls at least 70% of the way through a blog post.

1. Create a new trigger in Google Tag Manager and name it “Blog post – 120+ seconds AND 70% scroll.”

2. Select the “Custom Event” trigger type.

3. Enter “^gtm\.(timer|scrollDepth)$” for the event name and check the box for using Regex Matching.

4. Select to have the trigger fire on “Some Custom Events.”

5. Fire the trigger when DLV – gtm.timerEventNumber is greater than or equal to 4. Since we’re using intervals of 30 seconds, this equals 120 seconds.

6. Fire the trigger when DLV – gtm.scrollThreshold is greater than or equal to 70.

Custom Pixel Event Google Tag Manager

Create a Tag

Now, we are going to create a new tag in Google Tag Manager that will reference the trigger and variables we just made.

1. Create a new tag and name it “Facebook – Blog – 120+ Seconds AND 70% Scroll.” Names are up to you, of course.

2. Use the Custom HTML tag type.

3. Paste the following code within the HTML text box…

It should look like this…

Custom Pixel Event GTM

4. Under Advanced Settings > Tag Sequencing, check the box next to “Facebook – Blog – 120+ Seconds AND 70% Scroll fires.”

5. Select the “Facebook – Base Pixel” tag under setup.

Custom Pixel Event GTM

6. Under Triggering, select the trigger that we created previously.

Custom Pixel Event GTM

Test Your Event

Let’s make sure this event is working. Within your Events Manager, select your pixel and click on Test Events on the left.

Facebook Pixel GTM

Open a separate window or tab and go to a page of your website where this event should trigger. Scroll through the entirety of that page, and it should appear within this window.

Custom Pixel Event GTM

You can also use the Facebook Pixel Helper to test in this same way.

Custom Pixel Event GTM

Create Custom Conversions

I’ve created a custom conversion for this event. We’ll need this for tracking and optimization.

Custom Pixel Event GTM

1. Instead of “All URL Traffic,” select “Blog Tracking” under Custom Events.

2. Click to Add a Rule.

3. Instead of “URL,” select “Event Parameters.”

4. Select “Time and depth” as your custom parameter.

5. Enter “120” next to “Contains.” I’ve only created one custom parameter under this event, so this rule should pick it up.

6. Name it, select a category (probably “Other”), and set a value (probably leave it blank).

You can test these custom conversions just as you tested your event. You should also start to see activity within your list of custom conversions. Note that the activity will be lower than what you were seeing with time on page and scroll depth alone. These are now the best of the best visits!

Custom Pixel Event GTM

Add Columns in Ad Reports

This is information you should monitor within your ad reports, particularly when you drive traffic to blog posts. To do that, click to Customize Columns…

Facebook Pixel GTM

And then find your new Custom Conversion and check the boxes to add it to your report.

Custom Pixel Event GTM

Optimize for High-Quality Traffic

If you would normally run campaigns to promote blog posts, let’s do it a little differently.

First, use the Conversions objective rather than Traffic.

Facebook Pixel GTM

When you set Optimization for Ad Delivery at the ad set level, select the custom conversion you’ve created.

Custom Pixel Event GTM

By setting up campaigns this way, Facebook will attempt to show your ads to people most likely to spend at least two minutes and scroll at least 70% on a blog post.

Create Website Custom Audiences

We can now create audiences based on the new event we’ve created…

Custom Pixel Event GTM

This lets you focus on targeting those who actually READ your blog post — beyond those pesky Blog Post Title scanners and quick scrollers.

Your Turn

This approach has changed my Facebook advertising. It gives me a much clearer view of the quality of visitor I’m driving and allows me to optimize for that type of visitor. This isolated audience also gives me an option for targeting of a small, value-packed group.

Are you doing something similar? What do you think?

Let me know in the comments below!