1. Why Upgrade to the Webtrends v10 Tag?
John Clark, Principal Consultant, Webtrends
Tony Gray, Director of Consulting Services, Webtrends
2. 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
4. v8 & v9
v10 tag
Tags
Add-in
modules to
customize
Modify Tag to
Customize Tag never
ch a n g e s
Synchronous
Asynchronous
5. 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
6. Anatomy of the V10 Tag
V10 tag
Library
webtrends.js
Transforms are used to modify the data
collected or to change the behavior of the
tracking code. In either case, they are called
Transforms just before the beacon request is generated.
Selectors are a way to unobtrusively attach
multiTrack calls to dom elements. This uses
Selectors the browser's CSS Selectors engine to find
the elements.
Plugins are modules that run in the
Plugins Webtrends namespace that can be used for
almost anything.
8. 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
10. Transforms: Modifying Data Collected
Transform to modify the parameter z_call me, and if its
Caterpillar, transform it to Butterfly.
dcs.addTransform(
function(dcsObject, multiTrackObject) {
if (dcsObject.WT.z_callMe === “Caterpillar”)
dcsObject.WT.z_callMe = “Butterfly”;
)},
"all”);
12. Simple Application of A Transform
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
dcs.addTransform(
function(dcsObject, multiTrackObject) {
if (window.location.pathname.split('/')[1])
dcsObject.WT.cg_n = window.location.pathname.split('/')[1];
)},
"all);
13. 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”);
16. Selectors
• Selectors allow us to add event tracking
without changing the markup
• Events such as:
• Link clicks
• Download clicks
• Input box clicks
• Image clicks
17. 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
18. 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;
Filter for the target link
else return true;
},
transform: function (dcsObject, o) {
o.argsa.push("DCS.dcssip", window.location.hostname,
"DCS.dcsuri", window.location.pathname,
"WT.ti", document.title, Send our data
"WT.dl", “99”);
}
});
19. 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”);
}
});
21. 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.
22. 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);
23. 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
25. 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,
Send data Attach tracking
"WT.event_nam", e.name,
"WT.si_n", e.getAttribute('data-si_n'),
if there is a to all the Input
"WT.si_x", e.getAttribute('data-si_x'),
"WT.dl", '99'] data-si_n boxes on the
});
} attribute page
}
}
};
Webtrends.registerPlugin('FormTrack', FromTrack_loader);
})(window, window.document);
27. 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!
29. 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
31. Async Basics
(function() {
Async load line loads var s = document.createElement('script'); s.async = true;s.type="text/javascript";
s.src = 'http://s.webtrends.com/js/webtrends.js‘;
webtrends code as var s2=document.getElementsByTagName("script")
background process [0];s2.parentNode.insertBefore(s,s2);
}());
window.webtrendsAsyncInit = function() {
var dcs=new Webtrends.dcs()
.init(
Once loaded, the code runs {domain="statse.webtrendslive.com”,
timezone=-8,
‘webtrendsAsyncInit‘ to pick fpcdom="hilton.com“,
up configuration onsitedoms="secure3-dev.hilton.com“,
})
.track();
};
window.webtrendsAsyncLoad = function(_tag){
Then code runs // static values that go on all of the pages
_tag.WT.site = document.location.hostname;
’webtrendsAsyncLoad’ to _tag.WT.sitetype = 'B';
install customizations _tag.WT.t_B01 = 'Luxury.V1.R1';
// END Static Values
};
33. 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="“
}) Don’t forget to
.track(); remove last
}; comma
34. Step 2: Move over customizations
Old Config New Config
<script type="text/javascript">
_tag.dcsCustom = function () { window.webtrendsAsyncLoad = function(_tag){
// extract info from to URL to see where we are
_tag.WT.t_B02 = document.URL.split('/')[3];
// 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) {
// pull the content group data from the URL string
if (document.URL.split('/')[5].indexOf('index') != -1) {
if (document.URL.split('/').length > 5) {
if (document.URL.split('/')[5].indexOf('index') != -1)
Move _tag.WT.cg_n = document.URL.split('/')[4];
} else {
{ customizations _tag.WT.cg_s = document.URL.split('/')[5].split('.')
_tag.WT.cg_n = document.URL.split('/')[4];
} else { into AsyncLoad [0];
_tag.WT.cg_n = document.URL.split('/')[4];
_tag.WT.cg_s = document.URL.split('/')
[5].split('.')[0]; method }
} else _tag.WT.cg_n = 'Home';
_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
_tag.WT.z_brand =
// static values that go on all of the pages
XlateBrand(document.URL).Name; _tag.WT.site = document.location.hostname;
// END URL extracted data
_tag.WT.sitetype = 'B';
_tag.WT.t_B01 = 'Luxury.V1.R1';
// static values that go on all of the pages
// END Static Values
_tag.WT.site = document.location.hostname;
};
_tag.WT.sitetype = 'B'; </script>
_tag.WT.t_B01 = 'Luxury.V1.R1';
// END Static Values
}
35. 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: 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>
<!-- ----------------------------------------------------------------------------------- --> Data Collector TAG Copyright (c) 1996-2011 WebTrends Inc. All rights reserved. -->
<!-- START OF SmartSource
<!-- Warning: The two script blocks below must remain inline.: Moving
<!-- Version: 10.0.0 Tag Builder Version: NA : Created: NA -->
them to an external --> <script type="text/javascript">
<!-- JavaScript include file can cause serious problems with cross- = function() {
window.webtrendsAsyncInit
domain tracking. --> var dcs=new Webtrends.dcs()
<!-- ----------------------------------------------------------------------------------- -->
.init({
<script type="text/javascript"> domain="statse.webtrendslive.com”,
//<![CDATA[ timezone=-8,
var _tag=new WebTrends(); fpcdom="hilton.com“,
_tag.dcsGetId(); onsitedoms="secure3-dev.hilton.com“,
//]]> downloadtypes="xls,doc,pdf,txt,csv,zip,docx,xlsx“,
</script> navigationtag="div,table“,
<script type="text/javascript"> trackevents=true,
//<![CDATA[ trimoffsiteparams=true,
_tag.dcsCustom=function(){ enabled=true,
// Add custom parameters here. i18n=true,
//_tag.DCSext.param_name=param_value; fpc="WT_FPC“,
} paidsearchparams="gclid“,
_tag.dcsCollect(); splitvalue="“
//]]> })
</script> .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) {
36. Step 4: Test
• You should see a callback
• And the data payload
37. 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
38. Sessions You Must See
• Wed @ 2:40 : Ad Hoc Analysis: An
Answer for the Next Digital Marketing
Question
• Wed @ 3:40 : Implementing Facebook
Measurement
40. Thank You
John Clark, Principal Consultant, Webtrends Consulting Services
Tony Gray, Director, Webtrends Consulting Services
John.Clark@webtrends.com
Tony.Gray@webtrends.com
blogs.webtrends.com