Introduction to Google Analytics for web developers

Introduction to Google Analyticsfor web developers

Rubén Martínez

This graph compares the count of visitors from Google organic search to a website in two periods of time.

The story it is telling us is good news: the organic traffic markedly increased in a given month over the same period of the previous year (due to a previous investment in content and SEO).

Google Analytics reports incoming traffic to webs and apps

Introduction to Google Analytics - @RubenMartinezS

Google Analytics helps understand your visitors’ flows


Traffic volume by channel e.g. sessions per campaign and geolocation

Engagement• Depth• Density• Duplication

Content• A/B testing• Path Analysis

• A platform to track online and off-line activity of aggregated and anonymized visitors’ data

• A behavioural reporting platform of activity of web visitors and end-users

• A bread-and-butter tool for webmasters and marketing and business analysts

• A (peculiar) dashboard interface and a well documented API

Google Analytics is:


2 Web Analytics platforms: GA and SiteCatalyst


Number of websites using Google Universal Analytics (left) vs. Omniture SiteCatalyst (below).

Graphs with the same vertical scale and similar periods of time.

Source: builtwith.com

Developers can access Google Analytics via a front interface, client libraries and APIs. This is how each components and APIs are organized:

Organization of the platform

Source: https://developers.google.com/analytics/devguides/platform/


• A transactional CRM tool

Visitors’ individual data is owned by Google Inc. The end user has access to anonymized data only.

• A reporting tool of websites only

It can be configured to track offline and online activity from multiple devices, including smartphones, kiosks, consoles, etc.

• A parser of web server logs

• A KPI-centric Business Intelligence platform

Google Analytics is NOT:


Tracking code


<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-2282690-1', 'paradigmatecnologico.com');ga('send', 'pageview');

</script>

When the browser loads this script, it interprets the document.write and triggers a sequence of events leading to send hits to Google’s server.

Sign up to Google Analytics. If are tracking a website on the admin panel, setup a property (URL). Then paste the code provided by Google (example below) on all the pages you want to track:

Browsers sends hits to Google Analytics server


Sequence of events:

1. The client brower requests the javascript file

2. The Google Analytics server responds with the analytics.js file

3. The client fetches, loads and executes the javascript which dynamically creates an <img> element in the DOM

4. A GET from the browser hits the GA’s server with a URL containing appended values of the browser and the computer. This is an image/gif request. Example:

http://www.google-analytics.com/collect?v=1&_v=j20&a=806449001&t=pageview&_s=1&dl=http%3A%2F%2Fwww.paradigmatecnologico.com%2F&ul=en-us&de=UTF-8&sd=24-bit&sr=1920x1080&vp=1920x199&je=1&fl=13.0%20r0&_u=MAC~&cid=416165610.1399537988&tid=UA-2282690-1&z=2140666386

5. The server reads the data in the image URL and stores the hit (e.g. pageview or event) for logging and processing

6. The server responds with a single-pixel gif

The 3 most important variables: t, cid and tid


o t=pageview // Pageview hit type

o cid=416165610.1399537988 // Anonymous Client ID

o tid=UA-2282690-1 // Tracking Web property ID

Visualization of tags and scripts


The analytics.js JavaScript library uses a single cookie.

The cookie contains an anonymous identifier used to distinguish users.

https://developers.google.com/analytics/devguides/collection/analyticsjs/?hl=sv

https://developers.google.com/analytics/devguides/collection/analyticsjs/?hl=sv

analytics.js Google Analytics cookies


By default, the analytics.js library sets cookies on the top level domain,

excluding the leading dot, and sets the cookie path to the root level (/).

The name of the cookies is _ga

Note: The analytics.js library does not require setting cookies to transmit

data to Google Analytics.

• Track activity BEFORE pushing a brand new website or mobile app public

• Report activity on private areas (protected by a login and/or disallowed to crawling bots)

• Link to Adwords (CPC), GDN (CPM) and FDA (retargeting)

• Associate engagement data from different devices and multiple sessions (great for attribution)

• Upload transactional data of own userIDs if anonymized (great for e-commerce)

• Integrate your Google Analytics data with other business applications, e.g. via API

• Report activity across domains (tagging is however tedious and impractical)

What you CAN do with Google Analytics


• Generate leads (post-click marketing). Google Analytics does not provide IP addresses or the name of the company visiting a website for instance – and you should not upload this information either

• Upload personally identifiable information (see userIDs above)

• Carry out experiments across multiple domains (cross domain reporting OK but not tests A/B)

• Report –efficiently- inventory on e-commerce websites with SKUs

What you CANNOT do with Google Analyics


Metrics and dimensions

Dimensions are attributes of • Visitors• Sessions• Hits: page, event

The values of dimensions are strings.

Metrics are counts (average integer or currencies). Values of metrics are numbers.

Each custom dimension and metrics has an associated index.

There is a maximum of 20 custom metrics and dimensions


Event hits

Some user actions do not generate pageviews.

- completion of individual form fields (“Send”)- external, mailto: and pdf links- video play or complete- AJAX, Flash, jQuery or HTML5 interactions

You want to tag some HTML elements as events. Event tracking turns a normal

<a href=“/documents/e-book.pdf”>

into

<a href=“/documents/e-book.pdf” onclick=”ga(‘send’,’event’,’link’,’pdf’)”>


Metrics and dimensions

ga('send', 'pageview', { 'dimension5': '<?=$author?>' });

For example, if your page is scripted in PHP, the actual author of the page will probably be stored in a PHP variable like $author. In your PHP template, you can use this author variable to pass the author value to the custom dimension



Content Experiments based on a multi-armed bandit approach

Google Analytics Universal is user-centric


Advertisers cannot track users as individuals anymore due to the proliferation of smartphones. Cookies reside in desktop browsers. Cookies are not used by mobile apps and browsers such as Safari on iphones.

The identification of users and their sessions takes place now at server level on Universal, not browser/cookie level.

Cookies are still used but Google warns that their format might change without warning. Hence developers should not directly access the cookie analytics.js

sets as it could lead to script errors and incorrect data.

Instead, developers should use the get command to retrieve the clientId value when needed. Here's how to do this:

ga(function(tracker) { var clientId = tracker.get('clientId'); });

clientId for cross-device attribution


You can use a custom visitor ID based on customer email or ID in your database to merge smartphone / laptop / pc sessions into one cross-device session. You can track users who login to your website (authenticated users) by associating their clientID to their email.

<?if ($isAuthenticatedUser):?>ga('create', 'UA-XXXX-Y', {'clientId': '<?=md5($email)?>' });

<?else:?>ga('create', 'UA-XXXX-Y');

<?endif;?>

All users who sign in to your website will be tracked across all devices.

GA uses cookie value + domain as a unique internal identifier. If two or more websites set up the same client ID value based on customer email, the data won't be corrupted, because they are using different domains (and different GA profile id).

Link your acquisitions, engagement, and conversions


In a typical e-commerce scenario, you generate unique User_IDs through the authentication passed to an account at sign-in. The User ID will allow you to track for instance transactions and activity on per customer basis.

To enable this feature, add the following line to your tracking code to send User-ID data to Google Analytics.

ga('create', 'UA-XXXX-Y', { 'userId': 'USER_ID' });ga('send', 'pageview');

where USER_ID is a string and represents the stable and unique ID retrieved from your system.

You can then send anonymized data based on User_IDs to Google Analytics.

Thank you!

If you enjoyed these slides or have suggestions to improve them, let us know!

@rubenmartinezs

https://twitter.com/RubenMartinezS




Data & Analytics

Introduction to Google Analytics for web developers