Executing DTM at the top of the page

If you have been developing websites for a while, you will know that one of the typical recommendation is to execute as much JavaScript as possible at the bottom of the page. This is nothing new and Yahoo recommended it in 2007. The reason is very simple: JavaScript code tends to add a delay, both when loading the JS file and executing it; so, moving it towards the bottom, you make sure the HTML is loaded and the page is rendered before starting to execute any JavaScript. The user believes the page is loaded a bit sooner than when it is actually fully loaded. DTM knows that very well and this is why you have to add the two pieces of code: one at the top and one at the bottom of the HTML.

This approach works very well in most cases. DTM loads first the code that needs to be at the top of the page, but then allows you to defer the rest of the loading and executing at the bottom of the page, like Adobe Analytics, Adobe Audience Manager and 3rd party tags. This is the typical recommendation. The risk of this recommendation is that some page views might be lost, if the user moves away too fast.

However, there is one particular case where this recommendation fails very often. I was working with a well known British newspaper, helping them with the migration from another Web analytics tool to Adobe Analytics. They wanted to run both tools, side by side, for a short period of time, to make sure the numbers did not change too much. To our dismay, Adobe Analytics was showing a much lower number of page views than the other Web analytics tool. We realised that the problem was that Adobe Analytics was executed at the bottom of the page, as per the typical recommendations. The homepage of newspapers tends to be massive, taking many seconds, even minutes, to fully load. This means that the code at the bottom has the risk of not being executed, if the user clicks on a link or closes the browser tab after quickly reading the headlines.

The only solution in this case is to reorganise the code in a slightly different way:

  • The DTM header code needs to be moved to the bottom of the <head> section, ignoring the recommendation in DTM of pushing it to the top.
  • The DTM footer code should still be at the bottom of the <body>  section.
  • Add the data layer before the DTM header code.
  • Configure the Adobe Analytics tool to be executed at the top of the page.
    analytis-top
  • Set all Page Load Rules that will be setting analytics variables to be executed at the top of the page.
    plr-top
  • The Data Elements used for Adobe Analytics cannot use CSS selectors.

This solution guarantees that the analytics code is executed most of the times, at the expense of delaying for a few hundred milliseconds the load of the page.

Lifetime value of a visitor

A few years ago, one of my customers showed me a tip that I found very interesting: tracking the lifetime value of a customer. The SDKs offer a function to track the visitors lifetime value, but the traditional JavaScript implementation does not have anything similar. So, we will have to create it.

Before getting into the details, it must be noted that this is metric is not 100% precise. Visitors deleting the cookies or using different browsers, will have, as a consequence, fragmented data. However, I believe it still has some value, as it will provide additional information about your visitors. In fact, the visitor retention reports have the exact same limitation. In other words, you should apply the same considerations to this new metric as with the visitor retention reports.

The first thing we need is to devote an eVar and configure it as a counter eVar, with no expiration.

lifetimevalueevar

The next step is to add this piece of code in the doPlugins section:

Once you have this code live for a few days, you should see something like:

lifetimevaluereport

Probably, the data you will get is too granular to be useful, so, my suggestion is to create a classification of the values in ranges. For example:

  • 0 – 50: Very low value
  • 51 – 100: Low value
  • 101 – 200: Medium value
  • 201 – 500: High value
  • 501+: Very high value

Of course, the thresholds will be different for each business. Also, remember that the classification file needs to have all the values, you cannot specify ranges. If you are a regular expression ninja, you might want to try using the classification rule builder to achieve the same results.