How Web Tracking Works (Part 2)

Published in

Sparkline

3 min readJan 6, 2021

In part 1, we talked about the web tracking information flow and how the web server is required to output the structured data (data layer) to the browser. So what exactly is the data layer?

First, a quick and simplified introduction to JavaScript variables. Say you want to store the names and ages of two people. You could have these JS variables:

name1 = “Steve”;
name2 = “Alex”; 
age1 = 25;
age2 = 22;

But having a variable for every value is not very scalable. We can improve this by using array variables:

names = ["Steve", "Alex"];
ages = [25, 22];

Which means:

names[0], the 1st elemnt of the array, has the value of “Steve”
names[1], the 2nd elemnt of the array, has the value of “Alex”
ages[0], the 1st elemnt of the array, has the value of 25
ages[1], the 2nd elemnt of the array, has the value of 22

Still, this requires 2 arrays to store the names and ages separately. We can further improve this by incorporating object:

//Object 1
person1 = {
    name: "Steve",
    age: 25
}//Object 2
person2 = {
    name: "Alex",
    age: 22
}///Now we build the array (of objects)
persons = [person1, person2];

Another method of assigning values to an array of objects, which illustrates the value of each variable:

persons[0].name = "Steve";
persons[0].age = 25;
persons[1].name = "Alex";
persons[1].age = 22;

The above two methods require you to know the array element index (1st, 2nd, etc.). The preferred method is by using array push method:

//Start with an empty array
persons = [];//Push an object into the array
persons.push({
    name: "Steve",
    age: 25
});//Push another object into the array
persons.push({
    name: "Alex",
    age: 22
});

And the results are the same as the previous two methods.

Simply put, data layer is an array of objects. We just keep pushing new info into it.

Basically, the web server outputs the initial data layer. Subsequently we can add more data into data layer by using the JS push method.

For example, when a logged-in user loads a web page, the web server has the information about the user. It can output the initial data layer as such:

dataLayer.push({
    firstname: "Steve",
    lastname: "Rogers",
    gender: "m",
    membership: "VIP"
});

Subsequently, if the user clicks a button and we want to track that, we can add info into the data layer:

dataLayer.push({
    event: "button click",
    buttonLabel: "Contact Us"
});

This structure of arrays and objects is also known as JavaScript Object Notation (JSON).

It’s important to note that part 1 and this article focuses on the data layer, which is inherently a web developer’s job.

Web developers should only need to care about 1) What to push to the data layer, and 2) When to push it.

They should not have to care (too much) about the final endpoints such as Google Analytics, Floodlight, and Facebook pixels. This responsibility should belong to the digital tag manager.

In the next article, we will cover how Google Tag Manager can help with the last mile of sending data to endpoints.

Sparkline aims to provide data accuracy, comprehension and consolidation, and most importantly, tangible insights for businesses. Get in touch if you’d like to learn more.

How Web Tracking Works (Part 2)

Written by Chris Vu