Cmo usar Google Analytics

Rubn Martnez @ruben_dot

Front-end Developers Madrid

Meetup 28 junio 2016 at Liferays office in Madrid

http://creativecommons.org/licenses/by-nc-nd/3.0/http://www.paradigmatecnologico.com/

Audience-centric platform

Comparison of the organic traffic of a website in two periods of time. Source: Google Analytics

Google Analytics reports incoming traffic to webs (and apps)

Why Google Analytics?

Deep insights for better ROI

(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*newDate();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', 'paradigmadigital.com');ga('send', 'pageview');

Paste the code provided by Google in the section of all the pages at the beginning of

each project, filter views by IP addresses and leave one view unfiltered (raw data)

This script triggers a sequence of tos and fros between your application and Google Analytics servers.

Good Analytics practice

The ascent of the smartphones marks the obsolescence of the cookies

(*) http://www.google-

analytics.com/collect?v=1&_v=j20&a=806449001&t=pageview&_s=1&dl=http%3A%2F%2Fwww.domain.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-

XXXXXXX-1&z=2140666386

Servers analytics.js element in the DOM

Requests analytics.js

GET with a URL (*) containingappended values

single-pixel gif

stores the hit

Web browser

Google server

Sequence of events Client browser Google Analytics server

Four criticalvariables:

o to cido tido v

GET variables

Sequence of scripts of Google Tag Manager and tags of Google Analytics firing

Animated sequence elaborated from screenshots of the analytics tool WASP by Cardinal Path

Visualization of scripts firing tags

Source: Google

Administration panel of Google Analytics

Flexible settings to configure Views

Custom filter views - content and traffic

Some user actions do not generate pageviews:

- completion of individual form fields (Send)

- clicks on external, pdf and mailto: links

- video plays or completes

- activation of AJAX, Flash, jQuery or HTML5 interactions

In other to measure and report these actions tag some HTML elements as events by

hardcoding each one:

ga(send, event, category action, label);

Event hits vs. Pageviews hits

Events Real time

Reports of events

On the code:

ga('send', 'event', 'topmenulink','click', 'nav-' + action);

On the reporting panel:

Goals setups

Goals as events

Plugin WPFlow

1. Create Scroll events by specifying the target elements id or class

2. Create Click events by specifying the target elements id or class

3. Classify each event by category, action and label

Setup an event on Google Analytics on Wordpress

ga('send', 'pageview', { 'dimension5': stockist' });

Google Analytics is not restricted to its built-in variables.

You can be setup and passed as custom dimensions or custom metrics of your specific application.

You can tag some pageviews by hardcoding for instance a dimension specific to them, e.g. stockist:

Custom metrics and dimensions

Funnel of Conversions

Google Tag Manager for Single Page Applications SPAs

Snippet provided by Google to paste on your web application immeditely after the tag :

(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-NJTFQC');

Data Layers for Google Tag Manager replace the hardcoding of Google Analytics

dataLayer = [{

'pageCategory': 'signup,

'visitorType': 'high-value

}];

Data Layers to send events inside SPAs

ID page Categorytype

element idActio

n Label dataLayer

nkPR-001_Dashboard upsell buttonmessages-link-message-{n} click submit

{data}-{model}-{atributte-00}-{attribute-01}-{attribute-02}

nkPR-001_Dashboard upsell buttonmessages-button-close-message-{n} click hide

{data}-{model}-{atributte-00}-{attribute-01}-{attribute-02}

Creating event tags directly within the Google Tag Manager interface spares you

their hardcoding as with Google Analytics.

Events are fired

with triggers based on predefined variables

on custom variables that you can build within the Google Tag Manager UI

Example of specifications sent by Analysts to Developers with data Layers of events by HTML id

Mark up of events on Google Tag Manager

Diagnose your Google Analytics implementation

Physical analytics Beacons and sensors

Beacons Sensors

Demo of beacons ranging

Daily retention of visitors over time

T T T T T TT T T

T TTTTTTTTT

https://twitter.com/ruben_dothttp://creativecommons.org/licenses/by-nc-nd/3.0/

Cmo usar Google AnalyticsAudience-centric platformGoogle Analytics reports incoming traffic to webs (and apps)Why Google Analytics?Deep insights for better ROIGood Analytics practiceThe ascent of the smartphones marks the obsolescence of the cookies Sequence of events Client browser Google Analytics serverGET variablesVisualization of scripts firing tagsAdministration panel of Google AnalyticsFlexible settings to configure ViewsCustom filter views - content and trafficEvent hits vs. Pageviews hitsEvents Real timeReports of eventsGoals setupsGoals as eventsSetup an event on Google Analytics on WordpressCustom metrics and dimensionsFunnel of ConversionsGoogle Tag Manager for Single Page Applications SPAsData Layers to send events inside SPAsMark up of events on Google Tag ManagerDiagnose your Google Analytics implementationPhysical analytics Beacons and sensorsDemo of beacons rangingDaily retention of visitors over timeNmero de diapositiva 29