Real time Data Layer: Fixing the user timings’ tracking
pujoljulia June 12, 2016

Squash is an hilarious sport, don’t you agree? It requires both, intelligence and technical skills. I used to play it a lot after work with my former colleagues, we had a lot of fun playing together. Sometimes I remember that I had to play alone (well.. against the wall!), as anybody wasn’t available for whatever reason. Obviously, as many sports, it’s much more fun when playing with someone, but with the enough ability I could replicate a real play.

The Data Layer usually plays along with the platforms (Google Analytics, Adobe Audience Manager, Double Click, Facebook Audiences…) as its mission is to momentarily store data for eventually spread it through the Tag Management Systems among these platforms, however sometimes we may not want to send the data straight to the platforms or not immediately, then the Data Layer in order to keep these data, just like me with the squash, has to play alone (well… against the browser!).

Okay squash is good, but what the hell is the Real time Data Layer?

The other day I was diving among my blog’s data and I realized that the average time on page for the new users that only have visited one page (note that I fire an event on landing pages every 20 seconds) it’s too low, taking in account the time that takes to me to read one of my posts. Among of the multiple possibilities are either I read very slowly (could be…) or maybe these users abandon the page before to completely read the post (which makes me unhappy!), so I decided to solve it! Or at least, try it.

Okay, now I have the problem, would be great to have also the solution right? are you familiar with CRO? CRO (Conversion Rate Optimization) is the name that usually is used to denominate all stuff that as marketers we do to improve the performance of the webpages or Apps. A/B Test is CRO, Form Tracking is CRO, Heat Maps is CRO, Analytics is CRO… every change made based on data for increase the page KPIs, is CRO. As I already briefed you in my first post, taking care of the things in your own business/page/store/e-commerce is as important, if not more importan, than trying to get clients, since if your store is a mess, no one will spend any penny to buy your products and you will probably have spent a lot of money for nothing.

Among all mentioned kinds of CRO tools, there are ones called ‘Behavior Tools’ which basically do some stuff when certain things happen on the page/app, like the real time offers, anti-exit pop ups, real time surveys, dynamic URL changer… As we are PRO, we have already learned that the users have to be treated by segments (bunch of users that share something in common), so in my case, if I would have to do something with some bunch of users, as said, I would have to start by those that:

  1. Are new.
  2. Have visited only one page.
  3. Time spent on the page is less than the average (my blog’s time average -> 2:10 min)

Good! just taking a quick look at my analytics and using a bit of logic I’m able to say that all futur users that fit with the above conditions could potentially abandon the site before to read the entire post. This is just my hypothesis, as always in digital, everything have to be tested before to take it for granted, so let’s test it at one of my posts, maybe the one where the users spend less time, and let’s try something like the anti-exit pop up, since the users have to reach the top side of browser either they’re going to close the browser, open a new tab or just type another URL.

anti-exit-pop-up

If you didn’t know about the existence of anti-exit pop ups, just take a look at the above GIF image, as you can observe, it’s just a window triggered when the users try to get out of the page. Next step is to choose the tool that is going to help me on that matter and just by making a quick research, you will realize that there are plenty of them over there (Barillance, Qualtrics, OptinMonster…) some are doing more than just pop up triggering, they include A/B test, surveys, real time offers… For my blog I’ve chosen Marketizator, as it has a free version and because I always like to test new tools that come up at the market. Here are the steps to deploy the tool and set up the anti-exit pop up:

1. Install Marketizator

As every platform, for the implementation with just placing a javaScript snippet it’s enough, but be aware that in this case, the code has to be placed at the beginning of <head> tag:

Screen Shot 2016-06-10 at 19.45.36

Besides if you plan to use A/B testing (yes the tool also allow us to do that!) the code has to be the synchronous version, that means forget to place the code through Google Tag Manager since it not supports to load tags synchronously, which is very disappointing. Due that, you can place the snippet straight to the source code or use my beloved Dynamic Tag Manager which easily allows do it by setting up a ‘Page Load Rule’ without conditions:

DTM-Marketizator

Now just check if the tool has already detected the code:

marketizator-code-ok

Pretty easy right? Let’s go to the next tab!

2. Set up an experiment

Now let’s set up the pop up, but before let’s define the strategy a bit more. As my top performance post is the cookies one, “I would like to show a banner to the users that fit with the features discussed before, inviting them to read the cookies’ post just when they are about to abandon the post that performs worst, basically the first one I wrote Alright! Let’s do it!

The tool is very user friendly, so to apply my strategy I just need to follow a few steps. The first one is to click at the left menu and select Experiment>Web personalization>Anti Exit pop up to move to the next showed screen:

marketizator-experiment-menu

Once here, I’ve to prepare the variations, which in my case it’s gonna be very easy, as I want to show the pop up to everyone that fits with the features commented before, so what is important is to send all the traffic to the unique variation:

marketizator-variation

Next comes the Creative to show on the pop up (which can be easily created inside the tool):

marketizator-creative

And finally the most interesting part, the Audience or in other words, who have to see the banner? This is the point what makes the difference and defines the power of the tool: how much customisable it is. I’ve to say that the first time I saw it I was impressed, there are a lot of variables and possible combinations to create a segment like the weather temperature, weather condition, page views, time on session… so well, let’s create a segment that picks the users whose fit with discussed features:

marketizator-segment

Umm looks good! Ou… wait wait, why are you highlighted with orange the last condition of the segment? Good point! That’s because this tool, like the 90% of all analytics or advertising or behaviour or A/B test tools, calculate the times on page, on session, between sessions or whatever time by subtracting dates each time a page is load. Uouuu… and what does it mean? Means that this segment will never be triggered. Do you want to know why? Move to the next tab please!

3. mmm... I need more!

Of course you need more, you are wondering why any user will match with the segment and so the pop up will be never triggered. As said, the grand part of digital marketing tools based on javaScript, calculate all timings by substracting the dates between hits, or what is most common, between page views. To better get the point, I’ll recommend to take a look at one of Justin Cutroni’s post where he explains very well the situation on Google Analytics (as said, it could be applied to many digital tools). In a nut shell, and stealing the image from Cutroni, here is what happens:

time-on-site-google-analytics

As per the image, the time spent by users given by Google Analytics to each page is basically the difference between the date of load page hit (first time user lands on a page) and the next page load hit date (first time user lands on the next page). For the last page or if the user just visit one page, GA uses the last event hit (which is not accurate at all). Marketizator use the same technique, that’s why the segment created will never be fired as a new user that only visits one page will never start to count on the visit timer, as there will not be a second page hit.

Now you already have the proper background to understand that the times calculation on the digital marketing tools is horrible, but here we are to find a solution, not for Google nor Adobe Analytics, but for Marektizator (or any other behaviour tool) to act in real time.

Are you ready to go through the Real Time Data Layer? Stay with me!

Let's start to play squash: Real Time Data Layer

At this point you can realize that not all tools will offer to you all you expect from them, at least not as easy as select a drop-down option, here is when the Real Time Data Layer comes. The concept of real time applied on the data layer is nothing but the ability of the layer to retain data across pages. As you know each time a new page is loaded, all javaScript variables are deleted, so we have to find out some workaround to keep up the value… are you guessing what is it? Exactly! Cookies (before to continue, if you didn’t, please read my post about cookies).

Here is the thing, each time a new page loads, the Data Layer is gonna grab some cookies values, makes some calculations and update itself, sounds good right? Well, before to continue, and to be honest with you, the code I’m going to show you is not my creation, is a mix of Adobe Analytics plugins, decoded time ago by Stuart Roskelley and now improved and adapted to the Data Layer by me.

My code differs a little bit from the original one, so if you don’t plan to use the concept of Data Layer I’ve been explaining on my blog, feel free to use the Stuart’s version, as it could be pasted straight away to whatever TMS, nevertheless I strongly recommend to follow my way by establishing a Data Layer to organize your data, as TMS’ goal is not to achieve that kind of things. Furthermore, my new and enhanced version doesn’t need a page to loads to update the times, just needs the users to move the mouse (desktop) or the finger (mobile/tablet). With all of that being said, this is the code:

Notice that the code is basically divided on three parts, the first one is the values of the visitor lifetime ‘u’ (how long you think that the plugin has to recognize and consider a user as the same person), session lifetime ‘c’ (how long you think that the plugin has to consider a user inside a session) and onmousemove/touchmove detection ‘D’ (the times will be updated each time a user move the mouse/finger on the browser window, besides each time new page loads). Please change them by the values that fit best with your business.

Secondly, comes a disgusting amount of nonsense code, which would take me an entire post (or two) to explain it, but if I was you and I was reading the someone’s blog I would like to know what this code is doing, if you are like me, here you can find the commented code. The points to highlight of the core code are:

  • It stores five cookies at the user browser (the weight of all of them is insignificant). This point could be improved by pushing everything into a unique cookie as an object (probably some day I’m gonna do that).
  • Two of those are visitor level (expiration based on the number you place at ‘u’ variable) and the other three are session level (expiration based on the number you place at ‘c’ variable). Is important to remark that the expiration time of session cookies will be updated each time a user loads a new page or move the mouse/finger, if ‘D’ variable has been set it up as ‘true’, which means the expiration time will be extended ‘c’ min more from the user action (loadpage or move mouse/finger) had taken place (basically these cookies will expire when the user doesn’t interact with the page for more than ‘c’ min). This not applies to visitor cookies, as them expires exactly after ‘u’ days.
  • Set up ‘D’ variable as a true (recommended), forces the code to update timings both, when user move the mouse/finger or a new page is loaded.

The last part it’s just updating the Data Layer variables for then be readed from whatever TMS. This is how the code looks into the Data Layer:

Data Layer code

Couple of thing to realize on the above, first notice that the code is integrated into setPage(); method, that is because the code has to be placed each time a new page loads to perform as expected. The second point is that I add a new method called dayToDate();  in addition to the cookie methods, which basically takes days in a decimal format and convert it to readable data format (dd:hh:mm:ss). Here is the outcomes you can expect by placing the Data Layer in your site:

behaivour-data-layer

  1. dataLayer.getUser().pageView: Number of pages viewed in the current session.
  2. dataLayer.getUser().visitNum: Number of current session.
  3. dataLayer.getUser().visitorType: New/repeat.
  4. dataLayer.getUser().visitTime: Current time on session.
  5. dataLayer.getUser().timeSinceLastVisit: Time since last visit (based on last interaction on the previous session).

Catch the ball: From the Data Layer to the Tag Management

At that point, the data is easily accessible through the getUser(); method so we can save the values in the TMS variables. As we start with DTM, let’s continuous whit it by adding a Data Elements for each one of the above dataLayer values:

data-elements-data-layer

All data elements pick up the information directly from their dataLayer cousins except _user_visitTime, which just for simplify its management I’ve converted the value to the seconds. That’s the code you can place inside:

Now all information is already inside DTM (the same can be done with the ‘Variables’ on GTM), ready to send it to Marketizator or whatever tool we desire for analytics, remarketing/advertising or CRO purposes.

Among all ‘out-of-box’ variables that Marketizator has, it brings the possibility to pick up javaScript variables, but sadly Marketizator decides (meaning attach the proper event listener) if a pop up has to be triggered or not when the pages load, instead of when the user tries to abandon the site, making impossible to read the updated dataLayer values. That’s not a good deal, but we aren’t going to give up after all of that, are we?

Making the point against the wall: The workaround

Let’s recapitulate, so far we have got the Real Time Data Layer but unfortunately Marketizator is not able to check the conditions before the ‘anti exit’ event happens, which makes impossible to show the banner just to these users that try to abandon the site before 2:10 min.

I really don’t like the workaround I’m going to show you, but that is part of our job as Digital Marketers, do whatever we can to apply the most realistic business rules through technical stuff. Being said that, here is the trick: as Marketizator does not allow to make the rule by reading the updated dataLayer values, I’m going to set it up to fire always (always that a new user lands to my worst performance post and it be his/her first page):

simple-marketizator-rule

rule-fire-always
(notice that the Audience has to contain the segment but also the URL rule that determinate where the experiment has to run).

Next thing is to add a line of code _satellite.track(‘onmouseover’) on 31th line of the Real Time Data Layer snippet showed before:

This code automatically executes a ‘Direct Call Rule’ inside DTM each time the snippet updates the time because of the mouse movement, so let’s make inside it ‘the rule’ that Marketizator doesen’t allow to do:

marketizator-dtm-workaround

The first part of the Direct Call Rule basically replicates the rule we’ve tried to do inside Marketizator, but this one is updated each time the user move the mouse/finger, so as one of my conditions is just to show the pop up to those users that trying to escape before 130 seconds (2:10 min) AND NOT AFTER, when some user tries to get out after 130 seconds, the rule will be avoided. In order to check how it works, do the next:

  1. Clean all your browser cookies.
  2. Close this and all my blog tabs on your browser.
  3. Open a new tab and open the browser console and move to ‘Console’ tab.
  4. Place this URL to the browser: http://www.pujoljulia.com/digital-analytics-fundamentals.html
  5. Move the mouse into the screen, then you will see in the Console your current time on session.
  6. Try to escape before 130 seconds (and you gonna see the banner) and also try to escape after 130 seconds (banner will be avoided).

And… voila!

pop-up-anti-exit-marketizator

Final thoughts

Just a few more things to take in account before to end the post:

  • The pop up will be triggered just in desktop devices, as you can imagine there isn’t anti-exit pop ups for mobile devices, nevertheless the Real Time Data Layer snippet works both on desktop and mobile devices, so you will have the information available on any device.
  • The process followed with DTM can be easily replicate in GTM (excepting to place the Marketizator tag), as a ‘Direct Call Rule’ in DTM equals a ‘Data Layer Push’ in GTM.
  • The pop up could be easily showed under the right conditions just using a javascript setTimeout() function, but the idea is to see the big picture and build up something more insightful and robust.
  • Marketizator downsides: It’s too slow by refreshing code (sometime takes almost 10 min between the time a change has been made and the time it has been reflected at the page). Also their should work on the ‘Remove Experiment’ API method, like other behaviouring tools do.

I don’t want to end this post without say that Marketizator is a very good tool, in fact I would say that one of the best I’ve seen in terms of behaviouring marketing but as seen, any tool is perfect, far from that this is why the technical people is necessary on the marketing teams, they can adapt the platforms to perform according to the business requirements.

All the process this post has gone through is just a little example about what you could do with the data given by my Enhanced Adobe Analytics Plugin, so as the same way I’ve used it for CRO purposes, I could also send this information to the AdWords or Facebook pixels to improve their chances with the remarketing, to any Data Management Platform (DMP) for qualify the users or to Optimazely, to show different versions of the page depending on the time on session.

The possibilities are endless and will require nothing but place the Data Layer at your site, as easy as sounds!

2 Comments

  1. Hi Julia,

    Thanks so much for posting! This is a very informative article. I will share it with my team too.

    Best,
    Elena

Your comment

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