Engage 2013 - Why Upgrade to v10 Tag

Why Upgrade to the Webtrends v10 Tag? John Clark, Principal Consultant, Webtrends

Tony Gray, Director of Consulting Services, Webtrends

Agenda

•  Webtrends v10 Tag Flexibility •  Using Webtrends Transforms to Modify Data •  “Touchless” Page Markup Event Tracking •  Form Fill Tracking With Plugins •  Quick & Easy 4 Step Tag Upgrade

V9 VS V10 TAGS Digital Measurement with Analytics 10

v8 & v9 Tags v10 tag

Asynchronous

Tag never changes

Add-in modules to customize

Synchronous

Modify Tag to Customize

V10 Tag Benefits

•  Scalable – Easily deployed against multiple sites •  Maintainable – Selectors and plug-in are modular

•  Flexible – Modular architecture flexible tracking

•  Asynchronous – Runs in background thread

Anatomy of the V10 Tag V10 tag Library

webtrends.js

Transforms

Selectors

Plugins

Transforms are used to modify the data collected or to change the behavior of the tracking code. In either case, they are called just before the beacon request is generated.

Selectors are a way to unobtrusively attach multiTrack calls to dom elements. This uses the browser's CSS Selectors engine to find the elements.

Plugins are modules that run in the Webtrends namespace that can be used for almost anything.

TRANSFORMS Digital Measurement with Analytics 10

Transforms: Modifying Data Prior to Processing

•  Transforms are used to modify the data collected or to change the behavior of the tracking code

•  Transforms are used to change the data before its sent to Webtrends

Transforms: From A Caterpillar To A Butterfly

Transform

Transforms: Modifying Data Collected

dcs.addTransform( function(dcsObject, multiTrackObject) { if (dcsObject.WT.z_callMe === “Caterpillar”)

dcsObject.WT.z_callMe = “Butterfly”; )}, "all”);

Transform to modify the parameter z_call me, and if its Caterpillar, transform it to Butterfly.

A MORE PRACTICAL EXAMPLE Digital Measurement with Analytics 10

Simple Application of A Transform

dcs.addTransform( function(dcsObject, multiTrackObject) { if (window.location.pathname.split('/')[1])

dcsObject.WT.cg_n = window.location.pathname.split('/')[1]; )}, "all);

Use a transform to set the content groups base on the path in a url. This way we don’t need to add META content to every page.

www.webtrends.com/newproducts/streams/demo

Selectively Apply a Transform •  all – Always transform the data •  collect – only transform the data on collect •  multitrack – Only transform the data on multitrack

dcs.addTransform( function(dcsObject, multiTrackObject) { if (window.location.pathname.split('/')[1])

dcsObject.WT.cg_n = window.location.pathname.split('/')[1]; )}, “collect”);

Practical uses

•  Create pseudo page names •  Add data to a hit •  Modify data from a hit

OK, HERE COMES THE COOL STUFF! Digital Measurement with Analytics 10

Selectors

•  Selectors allow us to add event tracking without changing the markup

•  Events such as: •  Link clicks •  Download clicks •  Input box clicks •  Image clicks

Selectors •  The Old Way:

•  <a href="the_new_link" id=link_1 class="nav_links" onclick="dcsMultiTrack('DCS.dcsuri','/Corporate','WT.ti','The Corporate Site',’WT.dl’,’99’,’WT.myPram’,’customParmValue’);"> This is the first link</a>

•  The New Way: •  <a href="the_new_link" id=link_1 class="nav_links”> This is the first

link</a>

•  Adding onclick events into the markup causes scalability and maintainability issues as the page markup is changed

The Webtrends Selector Way – w/CSS

Page Markup – No Changes

Add the tracking into the Webtrends file dcs.addSelector(‘A’,

filter: function (dcsObject, o) { var e = o.element || {}; if (e.id == “link_1”) return false; else return true; },

transform: function (dcsObject, o) { o.argsa.push("DCS.dcssip", window.location.hostname,

"DCS.dcsuri", window.location.pathname, "WT.ti", document.title, "WT.dl", “99”);

} });

Filter for the target link

Send our data

The Webtrends Selector Way – w/jQuery

If jQuery is loaded on the page you can use jQuery as the selector:

dcs.addSelector(‘A#link_1’, transform: function (dcsObject, o) {

o.argsa.push("DCS.dcssip", window.location.hostname, "DCS.dcsuri", window.location.pathname, "WT.ti", document.title, "WT.dl", “99”);

} });

PLUGINS – A MODULAR APPROACH Digital Measurement with Analytics 10

Plugins

•  Plugin are re-usable modules that can contain transforms and/or selectors, and/or custom code.

•  They can be easily used across sites, rather then being put into the code.

Plugin Framework

•  The plugin framework is just a container for the functions you’d like to deploy

(function(_window, _document) {

// // put custom code here // selectors // transforms // custom stuff //

Webtrends.registerPlugin('yt', WTYT_loader);

})(window, window.document);

Plugin Example

•  Form fill tracking can get complicated when you have to bind to all the form elements with onClick multi-track handlers

•  But with a quick plugin you can easily deploy a method to track form fills

Webtrends Markup

Plugin To Track Changes In INPUT Form Elements

(function (_window, _document) { if (!_window.Webtrends) return; FromTrack_loader = function (t, p) { var elems = document.getElementsByTagName('INPUT'); for (var Tag = 0; Tag < elems.length; Tag++) { elems[Tag].onchange = function () { e = event.srcElement; if (e.getAttribute('data-si_n')) { Webtrends.multiTrack({ argsa: ["DCS.dcssip", window.location.hostname, "DCS.dcsuri", window.location.pathname, "WT.ti", document.title, "WT.event_nam", e.name, "WT.si_n", e.getAttribute('data-si_n'), "WT.si_x", e.getAttribute('data-si_x'), "WT.dl", '99'] }); } } } }; Webtrends.registerPlugin('FormTrack', FromTrack_loader); })(window, window.document);

Send data if there is a data-si_n attribute

Attach tracking to all the Input boxes on the page

Form Tracking Scenario Funnel

Webtrends Async Tag

•  Why move to the async code base? – Does not delay the page load like sync code

does – Modular approach simplifies maintainability – People are developing cool plugin’s

•  Facebook, Video Tracking, Form Tracking, Heatmaps, Streams

•  As easy as 4 simple steps to upgrade!

FOUR EASY STEPS TO ASYNC Digital Measurement with Analytics 10

4 Steps to Converting to Async 10

0. Take opportunity to evaluate current tagging

1.  Transform old config to new format 2.  Move over your customizations 3.  Replace the old code block with the new

code block 4.  Test

CONVERTING 9.X TO A10

It’s really simple

Async Basics Async load line loads webtrends code as

background process

Once loaded, the code runs ‘webtrendsAsyncInit‘ to pick

up configuration

Then code runs ’webtrendsAsyncLoad’ to

install customizations

(function() { var s = document.createElement('script'); s.async = true;s.type="text/javascript"; s.src = 'http://s.webtrends.com/js/webtrends.js‘; var s2=document.getElementsByTagName("script")[0];s2.parentNode.insertBefore(s,s2); }());

window.webtrendsAsyncInit = function() { var dcs=new Webtrends.dcs()

.init( {domain="statse.webtrendslive.com”, timezone=-8, fpcdom="hilton.com“, onsitedoms="secure3-dev.hilton.com“, })

.track(); };

window.webtrendsAsyncLoad = function(_tag){ // static values that go on all of the pages _tag.WT.site = document.location.hostname; _tag.WT.sitetype = 'B'; _tag.WT.t_B01 = 'Luxury.V1.R1'; // END Static Values };

Step 1: Transform Config

this.domain="statse.webtrendslive.com"; this.timezone=-8; this.fpcdom="hilton.com"; this.onsitedoms="secure3-dev.hilton.com"; this.downloadtypes="xls,doc,pdf,txt,csv,zip,docx,xlsx"; this.navigationtag="div,table"; this.trackevents=true; this.trimoffsiteparams=true; this.enabled=true; this.i18n=true; this.fpc="WT_FPC"; this.paidsearchparams="gclid"; this.splitvalue="";

Remove ‘this.’ Replace ‘;’ with ‘,’

Old Config New Config domain="statse.webtrendslive.com”, timezone=-8, fpcdom="hilton.com“, onsitedoms="secure3-dev.hilton.com“, downloadtypes="xls,doc,pdf,txt,csv,zip,docx,xlsx“, navigationtag="div,table“, trackevents=true, trimoffsiteparams=true, enabled=true, i18n=true, fpc="WT_FPC“, paidsearchparams="gclid“, splitvalue="“

Put into init section   <script type="text/javascript"> window.webtrendsAsyncInit = function() {

var dcs=new Webtrends.dcs() .init(

{domain="statse.webtrendslive.com”, timezone=-8, fpcdom="hilton.com“, onsitedoms="secure3-dev.hilton.com“, downloadtypes="xls,doc,pdf,txt,csv,zip,docx,xlsx“, navigationtag="div,table“, trackevents=true, trimoffsiteparams=true, enabled=true, i18n=true, fpc="WT_FPC“, paidsearchparams="gclid“, splitvalue="“ })

.track(); };

Don’t forget to remove last

comma

Step 2: Move over customizations _tag.dcsCustom = function () { // extract info from to URL to see where we are _tag.WT.t_B02 = document.URL.split('/')[3]; // pull the content group data from the URL string if (document.URL.split('/').length > 5) { if (document.URL.split('/')[5].indexOf('index') != -1) { _tag.WT.cg_n = document.URL.split('/')[4]; } else { _tag.WT.cg_s = document.URL.split('/')[5].split('.')[0]; _tag.WT.cg_n = document.URL.split('/')[4]; } } else _tag.WT.cg_n = 'Home'; _tag.WT.z_brand = XlateBrand(document.URL).Name; // END URL extracted data // static values that go on all of the pages _tag.WT.site = document.location.hostname; _tag.WT.sitetype = 'B'; _tag.WT.t_B01 = 'Luxury.V1.R1'; // END Static Values }

<script type="text/javascript"> window.webtrendsAsyncLoad = function(_tag){ // extract info from to URL to see where we are _tag.WT.t_B02 = document.URL.split('/')[3]; // pull the content group data from the URL string if (document.URL.split('/').length > 5) { if (document.URL.split('/')[5].indexOf('index') != -1) { _tag.WT.cg_n = document.URL.split('/')[4]; } else { _tag.WT.cg_s = document.URL.split('/')[5].split('.')[0]; _tag.WT.cg_n = document.URL.split('/')[4]; } } else _tag.WT.cg_n = 'Home'; _tag.WT.z_brand = XlateBrand(document.URL).Name; // END URL extracted data // static values that go on all of the pages _tag.WT.site = document.location.hostname; _tag.WT.sitetype = 'B'; _tag.WT.t_B01 = 'Luxury.V1.R1'; // END Static Values }; </script>

Move customizations into AsyncLoad method

Old Config New Config

<script src="/scripts/webtrends.js" type="text/javascript"></script>     <script type="text/javascript"> //<![CDATA[ var _tag=new WebTrends(); _tag.dcsGetId(); //]]> </script> <script type="text/javascript"> //<![CDATA[ _tag.dcsCustom=function(){ // Add custom parameters here. //_tag.DCSext.param_name=param_value; } _tag.dcsCollect(); //]]> </script>

Step 3: Replace old code block with the new

  <script type="text/javascript"> window.webtrendsAsyncInit = function() {

var dcs=new Webtrends.dcs() .init({

domain="statse.webtrendslive.com”, timezone=-8, fpcdom="hilton.com“, onsitedoms="secure3-dev.hilton.com“, downloadtypes="xls,doc,pdf,txt,csv,zip,docx,xlsx“, navigationtag="div,table“, trackevents=true, trimoffsiteparams=true, enabled=true, i18n=true, fpc="WT_FPC“, paidsearchparams="gclid“, splitvalue="“ })

.track(); }; (function() { var s = document.createElement('script'); s.async = true;s.type="text/javascript"; s.src = 'http://s.webtrends.com/js/webtrends.js‘; var s2=document.getElementsByTagName("script")[0];s2.parentNode.insertBefore(s,s2); }()); </script> <script type="text/javascript"> window.webtrendsAsyncLoad = function(_tag){ // extract info from to URL to see where we are _tag.WT.t_B02 = document.URL.split('/')[3]; // pull the content group data from the URL string if (document.URL.split('/').length > 5) { if (document.URL.split('/')[5].indexOf('index') != -1) { _tag.WT.cg_n = document.URL.split('/')[4]; } else { _tag.WT.cg_s = document.URL.split('/')[5].split('.')[0]; _tag.WT.cg_n = document.URL.split('/')[4]; } } else _tag.WT.cg_n = 'Home'; _tag.WT.z_brand = XlateBrand(document.URL).Name; // END URL extracted data // static values that go on all of the pages _tag.WT.site = document.location.hostname; _tag.WT.sitetype = 'B'; _tag.WT.t_B01 = 'Luxury.V1.R1'; // END Static Values

// see if we are on a property page if ( typeof document.getElementsByTagName('div')['ctyhocn'].innerText != undefined) { _tag.WT.pn_sku = document.getElementsByTagName('div')['ctyhocn'].innerText; _tag.WT.tx_u = 1; _tag.WT.tx_e = 'v‘ }

}; </script>

Step 4: Test

•  You should see a callback •  And the data payload

Top Take-Aways

Conversion to v10 is easy and provides a best practice digital analytics foundation. “Must Have” benefits include:

– Scalability – Ease of maintenance – Extreme flexibility – Asynchronous

Sessions You Must See

•  Wed @ 2:40 : Ad Hoc Analysis: An Answer for the Next Digital Marketing Question

•  Wed @ 3:40 : Implementing Facebook Measurement

Rate Session

& Speakers/ Panelists

Thank You

John Clark, Principal Consultant, Webtrends Consulting Services Tony Gray, Director, Webtrends Consulting Services

blogs.webtrends.com

[email protected] [email protected]

Engage 2013 - Why Upgrade to v10 Tag

Technology

Transcript of Engage 2013 - Why Upgrade to v10 Tag