blog.1.image
May 12, 2021

How to track Scroll-to-text fragments in Google Analytics 4 with GTM

by Justus

The difficult questions are the interesting ones and the answers to them are often hard to find. To make it a little easier, Google now uses Scroll To Text Fragments in their search results. Most notably in Featured Snippets, the boxes that highlight the answer to your query:

A featured snippet in Google search results

The target of this link looks like this:

https://mindblowingmagic.com/why-do-magicians-use-rabbits/#:~:text=Magicians%20use%20rabbits%20because%20rabbits,and%20rabbits%20are%20good%20pets.

The #:~:text= part signals the scroll-to-text fragment to the browser and will scroll to the relevant text section on the page and highlight it:

A text paragraph on a website that is emphasized with color

Unfortunately, Google has stopped showing data about those fragments in Google Search Console in May 2021. If you track the content of the fragment in Google Analytics, you can at least retain some insight into which sections of your pages are the most highlighted.

With Google Tag Manager

Step 1: Create a fragment variable

Create a Custom JavaScript variable that extracts the fragment from the user’s URL. You can simply copy & paste the following:

function test() {
  if (performance && performance.getEntries()[0].name.indexOf("#:~:text=") != -1) {
      var entries = decodeURIComponent(performance.getEntries()[0].name.match("#:~:text=(.*)")[1]);
      var frag = entries.replace(/, /g,"*").replace(/,/g,"...").replace(/\*/g,", ");
      return frag;
  }
  else return ""
}
A custom JavaScript variable to read the fragment

I’ll call this one js.fragment.

Step 2: Add the parameter to GA4

Since you’re reading this fairly specific article, I’m going to assume you already have a basic GA4 setup up and running. If not, check out Simo Ahava’s guide to GA4 tracking first.

In your config or pageview tag for GA4, add a parameter of your own choosing and set its value to reference the {{js.fragment}} variable you created one step earlier:

A custom JavaScript variable to read the fragment

Then you can publish your Google Tag Manager container and you should already be sending the fragments to your GA4 property.

Create the dimension in GA4

To actually conveniently access the data in GA4, you should then create a custom dimension based on the new parameter. Scroll down in the left navigation to find your Custom Definitions and create a new dimension:

The Custom Definitions overview in Google Analytics 4

Keep in mind that the Event parameter field should match with the parameter name in your GA4 tag in GTM. Here, that’s scroll_to_text:

The custom dimension based on the parameter

And that’s it, you can now include your know Scroll To Text Fragment dimension in your Google Analytics 4 reports.

Did this article help you?

Then follow me on twitter
@hume_dev
so you won't miss new articles here and for Web Analytics and Marketing technology updates in general :)