engage 2013 - why upgrade to v10 tag
DESCRIPTION
TRANSCRIPT
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
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: 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: 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.
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”);
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
• 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
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
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!
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
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 <!-- START OF SmartSource Data Collector TAG Copyright (c) 1996-2011 WebTrends Inc. All rights reserved. --> <!-- Version: 10.0.0 : Tag Builder Version: NA : Created: NA --> <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
<!-- START OF SmartSource Data Collector TAG --> <!-- Copyright (c) 1996-2011 WebTrends Inc. All rights reserved. --> <!-- Version: 9.3.0 --> <!-- Tag Builder Version: 3.1 --> <!-- Created: 1/14/2011 4:37:20 PM --> <script src="/scripts/webtrends.js" type="text/javascript"></script> <!-- ----------------------------------------------------------------------------------- --> <!-- Warning: The two script blocks below must remain inline. Moving them to an external --> <!-- JavaScript include file can cause serious problems with cross-domain tracking. --> <!-- ----------------------------------------------------------------------------------- --> <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
<!-- START OF SmartSource Data Collector TAG Copyright (c) 1996-2011 WebTrends Inc. All rights reserved. --> <!-- Version: 10.0.0 : Tag Builder Version: NA : Created: NA --> <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>
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
Thank You
John Clark, Principal Consultant, Webtrends Consulting Services Tony Gray, Director, Webtrends Consulting Services
blogs.webtrends.com