Recently, I have been looking for a solution to prevent certain scripts from firing unless there is user interaction with the page. I originally planned to use the Scroll Depth trigger from Google Tag Manager (GTM), but found it to be unreliable. Why is that? Because this trigger does not actually check whether the user is scrolling, but rather how much of the page’s length is in the viewport. In such cases, a short page can get scrolled to 100% on initial load if it fits in the viewport.

Why we will load scripts after the first user interaction ?

Preventing scripts from loading before the user clicks, scrolls, or touches the screen is done for several reasons. Many of them have to do with performance.

Spiders and bots, such as Googlebot, do not interact with the pages they crawl. So when these crawlers visit your site, certain scripts would not load at all. As a side effect, your scores in performance checkers like Google Pagespeed Insights will improve.

There are also performance-related benefits for users too. Preventing scripts from being loaded before the first scroll, click or touch, means the actual content on your website will load faster. The First Contentful Paint, which is also part of the Core Web Vitals should improve too.

User manual for Google Tag Manager

I decided to use the addEventListener() method to determine exactly when the user actually starts scrolling. If you’re not familiar with JavaScript, don’t worry. I will give you a step-by-step guide on how to fire the scripts in GTM only after the user has scrolled the page.

Creating javascript for user interaction detection

<script>
  ['click', 'scroll', 'mousemove', 'touchstart'].forEach(function(e) {
    window.addEventListener(e, firstInteraction, {
        once: true
    });
});
var userInteracted = false;

function firstInteraction() {
    if (!userInteracted) {
        userInteracted = true;
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            'event': 'firstInteraction'
        });
    }
}
</script>

Creating custom HTML tag in GTM

1. Go to left menu line Tags

2. Push New in the top right conner

3. choose Custom HTML tag type in the opened popup right menu

4. Copy the previosly created javascript code and past it into your custom HTML tag

5. Select the default trigger All Pages for this tag

6. Rename the tag to user_interaction_tag, it should look like in the following image:

This javascript code tracks when the user actually starts interacting with your website, either by moving the mouse, clicking, scrolling, or touching the screen. It does not take into account the length of the page and how much of it is in the initial viewport, unlike GTM’s Scroll Depth trigger.

It executes a function that sends a custom event named firstInteraction to the data layer when it detects the first user interaction. This is the custom event that we’ll later use as a trigger for scripts/tags to fire after user interaction with the page.

The {once: true} parameter ensures that each event listener runs once, so we won’t send multiple custom events to the data layer beyond the first interaction.

To ensure that the event is only sent on the first interaction, the userInteracted variable is used. Otherwise, the event would be sent once for each type of event (click, scroll, mouse move, touch)

Creating a trigger with a custom event in GTM

Now we need to use it as a trigger because we will be sending an event to the data layer after the first interaction.

1. Go to left menu line Triggers

2. Push button New in the top right conner

3. Choose Custom Event in the right menu of the popup

4. Fill up firstInteraction in the field Event Name

5. Rename the trigger to user_interaction_trigger, it should look like this:

Now we have a trigger that can be used to fire any tag in the GTM after the user has interaction through website.

Use the user_interaction_trigger for new or existing tags in GTM

1. Go to the GTM left menu line Tags

2. Push button New or choose already created tag

3. If you push New then choose neded tag type, add you tag and if you choose exiting tag see next step

4. For the tag you should set field Triggering as user_interaction_trigger

Verify scripts that are loaded after a user interaction

You can now use the Google Tag Assistant to confirm that your YandexMetrika tag will load after the user interaction, if you have created at least one tag that uses the firstInteraction event as a trigger.

1. Push Preview button in the top right conner of the GTM top menu

2. In the opened window insert your website url in field named Your website’s URL

3. Push the button Connect

4. A new tab will open with the URL of your website and If everything works good then you receive message Tag Assitant Conneted

5. You should see confirmation that the debugger is connected and push Finish

6. The tags with user_interaction_trigger that firing after users interaction on your website in the tab associated with the debugger was load.

7. You can check all tags with user_interaction_trigger in left menu line Triggers, then click user_interaction_trigger and check tags that was load with Custom Event: firstInteraction

8. All tags is working as expected, and you can submit the changes to Google Tag Manager if you see results similar to the screenshot above.

Conclusion

In totaly I’ve set up tags to load only after any users interaction like scroll, click, mouse move, touch. This has greatly reduced the initial load time of my web pages.

In any case, some projects needs more strong analytics, I mean, if you need to detect all bots and server errors, than you should exclude you primary analytics system tag from user_interaction_trigger and set up default tag as All Pages, often primary analytics is Google Analytics.

Google Page Speed Modile

Google Page Speed Desktop