CODEWITHSUNDEEP
google-tag-manager
AlienDev
AlienDev

Reputation: 333

How do I track when a user refreshes the page in GTM

I have an application that I manage, that builds transactions for someone to download. The user downloading, may have to wait some time from the moment he/she hits build, till they are able to download. During this time, the page that they are on, auto refreshes about every 3 minutes. We feel that maybe users are manually refreshing as well.

We currently use Google Tag Manager (GTM) on this application and are wanting to track said behavior. Are users refreshing the page over and over again, until the screen shows that the transaction they were waiting for, is ready for them.

For example, this is what I'm hoping to see: 

Category: foo-bar 
Action**: Auto Refresh

Category: foo-bar 
Action: Manual Refresh

Upvotes: 1

Views: 2755

Answers (1)

sdhaus
sdhaus

Reputation: 1896

There are multiple steps to achieve this.

1) Set up a form of data persistence (e.g. cookie, session storage or localStorage). In this example, I will use a cookie.

2) Save current page to the defined cookie. In this case previousPage.

3) Within the function that automatically reloads the page, include a method of identification that this occurred. In this example I will use a dataLayer push.

4) On the page load develop logic to determine, if the current page equals the previous page AND the dataLayer push (3) is not present.

Specifics:

2) Create a HTML script that fires on every pageload:

<script>
document.cookie = "previousPage= " + {{Page Path}} + "; path=/;";
</script>

Create a new variable called Previous Page.

1st-Party Cookie -> Cookie Name -> previousPage

3) Fire the below dataLayer push prior to GTM loading, if the page is automatically reloaded.

dataLayer.push({'automaticReload' : True})

Create a new variable called Automatic Reload.

Data Layer Variable -> Data Layer Variable Name -> automaticReload

4) Create a new Custom Javascript Variable named Reload:

function(){
    if({{Page Path}} == {{Previous Page}}){
        return true}
    else{
        return false}
    };

Create two new events.

Event 1: Manual reload

Trigger:

Reload : equals : True

Automatic Reload : does not equal : True

Event 2: Automatic reload

Trigger:

Reload equals True

Automatic Reload equals True

Upvotes: 2

Related Questions