JavaScript introduction guide for Data Analyst and Marketers.

How does the data layer really works ? What’s behind the Google analytics “raw” data ? How does “hits” are sent to GA ? These questions might have crossed your mind if you’re willing to work in the analytics field. However the answers aren’t obvious. In reality you don’t even know how data are really collected, stored or formatted to fit in front-end dashboard. In this condition, it’s hard to ensure the quality of your data, harder to communicate about then and almost impossible to influence any business or strategic decision. The best way to overcome this ignorance is to look under the hood and the first step is to grasp some basics programming knowledge. Lucky you, this article aim to give a practical basics introduction to javascript. By the end of this article you will be able to write and understand the following line of code :

Var value = X

function increment() {
value++;
$(‘.watch-view-count’).text(value).append(“ vues”)
}

setInterval(‘increment()’, 0,000000000000001);

Why Javasript ?

Javascript is a programming language. With HMTL and CSS, he is one of the three major component of the World Wide Web. If you have ever take a look at a Google Analytics Tracking code it’s written in Javascripts. Basically, Javascript will help us to build interaction and pass data between our browsers, the web page we visits and some third-parties like our analytics tools. By knowing a bit of javascript you will :

  • Better understand your Analytics implementation and how your data are collected.
  • Build you own custom javascript tag within Google Tag Manager
  • Start looking beyond Google Analytics…

Starter Kit

I’m assuming you have some basic knowledge in CSS and HTML. This tutorial will be divided in 6 baby-step which will help you to write the following line of code, already presented in introduction:

Var value = X

function increment() {
value++;
$(‘.watch-view-count’).text(value).append(“ vues”)
}

setInterval(‘increment()’, 0,000000000000001);

Before getting our hand dirty we will pass in review few concept and basics tools that are essential to accomplish our journey.

Console Developers Tools :

If you really want to start learning javascript and deeply improve your knowledge in the analytics field, the Console developers tools will be one of your best friend. In Chrome this tool is accessible from Views -> Developers -> Developers tools or with the shortcut Alt+cmd+I on mac. It is heavily used to debug analytics implementation. The console developer tools also allow you to access the code source of any website and dynamically interact with them.

Editing the headline of the New York Times

Basic Javascript elements :

Here is some of the main javascript element we will encounter in this tutorial : VariableOperatorFunctionJavascript library and Method. Here is a brief definition of these key elements based on the code we’re going to write:

value = X

Attribute a value to a variable. x is the value, var is the variable.

value++;

++ is the operator for incrementation

my_fuction() { some code here}

a name followed by some () then {} is a function. A function will execute the code between the {} when it as been called.

$(‘.watch-view-count’)

the $ is coming from JQuery. It’s a library ( some kind of already premade code) that help you to do specific action. Here It’s will help us to election the HTML element ‘.watch-view-count’

setInterval

SetInterval is a method, which is more or less a predefined function.

That might sound confusing but all will be clear in few minutes.

How to tweak the youtube meters with Javascript in six baby-step.

First Step : Build a variable with a value assigned

The first step is really easy. Open a new tab, open the Console Developers Tools, type :

my_var = 5 (or whatever number you want to assign to your variable)

Then enter.

Check if everything is working properly by typing my_var and enter again. The value you have to chose to enter should be printed in your console dev tools.

At first my_var is not defined. We typemy_var = 5 and enter to assign it a value. Then my_var should return us the attributed value.

You already know how to build a variable and assign it a value !

Second step : Increment operators

They are multiple class of operators in javascript. Most of them are basic element and easy to use. Like the Increment operators : ++.

So let’s get back to our Console. Enter the name of the variable you’ve declared previously, press enter. The console should print the value of this variable. Add ++ to your variable. Press enter again. Now if you print the value of your variable you should see incremented by one.

Add ++ to your variable then Enter. now if you print your variable if should be increment by one as compared to the value you’ve initially defined.

Third step : Function

However what we don’t want to do is to type my_var++ each time we want to increment our variable. Instead we going to build a function, that will help us to automatically increment our variable . A function is just a line of code describing a simple operation. Let’s build a function called my_function . Like before all you have to do is to write the following line of code in your console then type enter :

function my_function() {my_var++}

Once you’ve defined your function can be called by typing the name of your function followed by (); in your console and as always press enter. so no your function is defined, each time you’ll call your function it will automatically increment your variable

Step four : Repeat the function automatically with set Interval method

With the last step, we still need to call our function each time we want to increment our variable. So we’re going to use the setInterval method to solve this issue :

setInterval(‘increment()’, 1);

With this line of code you can call your action every second until the end of time.

Second last step : JQuery and Query selector

This part is little bit more complicated. First you’ll need to load JQuery. Go to this url to grab the Jquerry code http://code.jquery.com/jquery-latest.min.js and simply copy and past it as it is on your console developpers tools. (ctrl + A, ctrl +C). then we will use the div selection (‘.watch-view-count’) to select the youtube meter and replace the actual value of the number with our variable.

$(‘.watch-view-count’).text(my_var);

Checking if my_var is well defined, copy and past jQuery, then add our line of code.

Step six: the final

Tet’s take a fresh look at the whole code :

Var value = X

function increment() {
value++;
$(‘.watch-view-count’).text(value).append(“ vues”)
}

setInterval(‘increment()’, 0,000000000000001);

you should be now able to understand it :

we define a value with a variable

we create a function to increment this value

we select one element of our page and append it our value

the we repeat our function with the value to dynamicaly increment the number of views.

I guess you’ll need to dig deeper into all this, but you have all the basic concept of javascript. and most of all the basic concept you need to build some stuff with Google Tag Manager. Which is good because you can follow my second article.