During the past couple of weeks, I’ve walked you through how to create custom Facebook pixel 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.
4. Under Triggering, we want our base pixel code to execute on all pages of our website.
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.”
2. Create a variable called “DLV – gtm.timerInterval” using the Data Layer Variable type. Use the data layer variable name “gtm.timerInterval.”
3. Create a variable called “DLV – gtm.scrollThreshold” using the Data Layer Variable type. Use the data layer variable name “gtm.scrollThreshold.”
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.
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.
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.
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…
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.
6. Under Triggering, select the trigger that we created previously.
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.
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.
You can also use the Facebook Pixel Helper to test in this same way.
Create Custom Conversions
I’ve created a custom conversion for this event. We’ll need this for tracking and optimization.
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!
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…
And then find your new Custom Conversion and check the boxes to add it to your report.
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.
When you set Optimization for Ad Delivery at the ad set level, select the custom conversion you’ve created.
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…
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!
