How to measure scroll depth and time on page with Google Tag Manager to show a popup with Optimize

In my last post, I have explained how to address different interest groups by using the step-by-step-guide to collect information about the users’ interests and plans.

Additionally, we can add some more informational content pages about different event types (wedding, birthday, business event) to our site to see what the users are interested in.

If a user is reading a longer content section about weddings, birthday parties or business events and why the photo booth is the right gadget for the event, he is probably interested in this specific topic, but he could also look at the different pages just by curiosity - however, we cannot be a 100 % sure. To  prevent the user from being placed in the wrong interest group, it is important to be really sure that he is seriously interested in a specific topic and event type. To do so, the best way is to take him to the step-by-step-guide.

Website Popup that links to Step-By-Step-Guide

To make the user aware of the guide, a popup should be displayed.

The photo booth website (described in the previous post, see https://wuerzburg-fotobox.de/) has three content pages describing wedding, birthday and business event use cases. All pages comprise about 500 words of content. An average reader needs about 2.5 minutes to read the entire text. But let’s be honest - most people are only skimming the text.

Let's assume that if it takes  a user 30 seconds or more to scroll down the page to 70%, he is interested in the topic and he might plan to get a photo booth for this event type. To measure this data, we are using Google Tag Manager.

Google Tag Manager

Scroll Depth

Create a new trigger for the HTML tag, which is used in Google Optimize later to show the popup.

Go to the Triggers Section in Google Tag Manager and create a trigger for Scroll Depth and set it to 70% vertical scroll depth.

Google Tag Manager Scroll Depth Trigger

Set the trigger to fire only on the content pages /hochzeit, /geburtstag and /business-event (Regex https:\/\/wuerzburg-fotobox\.de\/(hochzeit|geburtstag|business-event)\/)

Time On Page

To track the time the user dwells on the content pages, create a new Custom JavaScript Variable.

Custom JavaScript Variable to measure Time on Page

function(){
  var now = new Date();
  var start = google_tag_manager[{{Container ID}}].dataLayer.get("gtm.start")
  return Math.floor((now-start)/1000)
}

gtm.start (see var start) is the timestamp when Google Task Manager  was loaded on the page. var now contains the current timestamp. If you subtract both from each other, you get the time on page.

Go back to the Scroll Depth trigger we have created before and add an additional condition.

Two conditions, which trigger the Custom HTML Tag

Now, the trigger only fires if it took the user 30 seconds or more to reach the 70% scroll depth.

Custom HTML-Tag

When a user has read the content page, the popup which links to the step-by-step-guide should be shown on the following page. However, the DataLayer, where GTM stores all the values and tags, is not persistent, meaning that the values are no longer available on the next page. For this reason, we use the SessionStorage, which is persistent for the entire browser session.

Create a Custom HTML-Tag in GTM and set the trigger to Scroll Depth - SEO Page (the Scroll Depth Trigger we created before).

Custom HTML Tag which sets seoPageInteraction: true to sessionStorage
HTML - SEO Popup SessionStorage

sessionStorage.setItem("seoPageInteraction", true);
sessionStorage seoPageInteraction: true

With this code snippet, we set seoPageInteraction to true to use it later in Google Optimize.

Google Optimize

Go to Google Optimize and create a new personalization.

Select Personalization in Google Optimize

Set the homepage as editor page and go to the editor.

Since we are using position: fixed for our pop up (see preview above) it doesn’t really matter which element you click on to insert HTML.

Add additional HTML in Google Optimize

The following HTML and CSS code builds the popup that links to the step-by-step-guide.


<div id="seoPopup">
    <div id="seoPopupText">
        Du bist dir noch nicht sicher, <b>welches Paket</b> am besten zu
        dir passt?</div>
        <a style="background-color: white; color: rgb(255, 153, 20); position: absolute; border-radius: 14px; top: 0px; right: 5px; width: 24px; height: 24px; line-height: 24px; text-align: center; font-size: 18px; margin-top: 4px;" id="seoPopup-top-close-button" alt="Schließen">×</a>
        <a id="seoPopupLink" href="https://wuerzburg-fotobox.de/step-by-step-guide/schritt-1/" alt="Step-By-Step Guide">
            <b>Jetzt zum Step-By-Step Guide</b>
        </a>
 </div>

#seoPopup {
   max-width: 330px;
   border-radius: 10px;
   background-color: #ffffff;
   align-items: center;
   text-align: center;
   margin: 5px;
   position: fixed;
   right: 10px;
   bottom: 100px;
   z-index: 100;
   box-shadow: 0px -2px 6px #5c5c5c;
   }

#seoPopupText {
   background-color: #ff9914;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   color: #ffffff;
   padding-top: 5px 30px;
}

#seoPopupLink {
   border: 2px solid #ff9914;
   background-color: #ffffff;
   color: #ff9914;
   border-radius: 3px;
   margin-top: 10px 5px;
}

The popup should be shown on all pages except the contact page and the content pages itself (/hochzeit, /geburtstag, /business-event).

Page targeting in Google optimize to run experience on selected pages

The popup should only be shown if seoPageInteraction equals true (remembered we have set this before) and if Step 1 (event type wedding [hochzeit], birthday [geburtstag] and business event)  isn’t set yet.

Go to the Audience Targeting section in Google Optimize and add a rule. Choose Custom JavaScript as rule type. 

SessionStorage: seoPageInteraction

Click on Create New and add the following code to get the seoPageInteraction value from the sessionStorage.

Custom Javascript Variable to select seoPageInteraction from sessionStorage

function() {
    var seoPageInteraction = sessionStorage.getItem("seoPageInteraction");
    return seoPageInteraction;
}

If seoPageInteraction equals true, the popup should be shown.

seoPageInteraction equals true

LocalStorage: Step 1

If the user has already gone through the step-by-step-guide, there are already key-value pairs set for Step 1, 2 and 3. In this case,  there’s no reason to ask the user again to click through the guide.

localStorage step-by-step-guide

To check if those values are already set, we have to create another Custom JavaScript in Google Optimize.

Custom Javascript Variable to select Step 1 from localStorage

function() {
    var localStorageStep1 = localStorage.getItem('Step 1');
    return localStorageStep1;
}

Add all possible values Step 1 could have (In my case Hochzeit [wedding], Geburtstag [birthday] and Business Event) and set it to does not equal.

Step 1 doesn't equal Hochzeit, Geburtstag or Business Event

Great! The popup will be shown whenever the user reads the page (or at least took 30 seconds and 70% scroll depth) and he didn’t go through the guide before.

But wait … Isn't it just super annoying for the user if a popup pops up on every following page until he has finally clicked through the guide? – Probably yes!

Close Popup Button

To avoid annoyed visitors, we have to give them a chance to close the popup and remember it for the next pages.

Arrow on the popup to emphasize the closing button

Go again to the editor in Google Optimize where we have added the HTML code before. Go to the seoPopup code, click Edit Element and Run JavaScript to add JavaScript.

Add additional JavaScript in Google Optimize

The following code hides the popup when Popup Close Button was clicked (display: none) and sets seoPopup-closed equals true to the sessionStorage.


jQuery('#seoPopup-top-close-button').click(function() {
   jQuery("#seoPopup").css("display","none");
   jQuery("#seoPopUpPointer").css("display","none");
   sessionStorage.setItem("seoPopup-closed", "true");
});

If a user has clicked the close button, the popup remains hidden for the rest of the session. But in the next session, the popup can be shown again if seoPageInteraction equals true.

Go again to Audience Targeting in Google Optimize and add a third rule. Create another Custom JavaScript to get the seoPopup-closed value from the sessionStorage.

Custom Javascript Variable to select SeoPopupClosed from sessionStorage

When the button was clicked (equals true), the popup remains hidden. The other way round, this means it should be displayed if sessionStorage doesn't equal true.

seoPopup-closed doesn't equal true

To keep track of how many visitors have seen the popup turn on the Google Analytics measurement.

Turn on Google Analytics Measurement in Google Optimize

Before going live, we have to check if everything works fine. Turn on the debug mode under Site Changes > Preview.

Check with Google Optimize Debugging Mode if personalization is running
Popup works in debugging mode

Ta-da!! All conditions are valid and the experience was applied!

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin-squarexing-square