- Print
- DarkLight
- PDF
Upgrading your Webtrends JavaScript Tag from V9 to V10
Although the v10 JavaScript tag has changed significantly from previous releases, you can easily upgrade from a prior version.
We recommend placing the tag in the <head>
section. Since the tag is loaded asynchronously, it does not block page rendering in any way.
Upgrading is a 4 step process:
- Transform Configuration Settings
- Migrate Customizations
- Change HTML Markup
- Test
Before you begin, you'll need to have:
- Complete copies of a v9 and v10 tag (ideally, the two
.zip
files from Tag Builder). - Ability to edit HTML and JavaScript
- Access to a web server, so you can test pages
Transform Configuration Settings
For v10, the configuration settings are separated from the tag logic. In v9, configuration settings are changed by editing the user modifiable properties of the WebTrends object constructor (webtrends.js):
function WebTrends(){
var that=this;
// begin: user modifiable
this.dcsid="dcs9x99xxxx9xxx9xx9xxxx9x_9x9x";
this.domain="statse.webtrendslive.com";
this.timezone=-3;
this.fpcdom=".foo.com";
this.enabled=true;
this.i18n=false;
this.fpc="WT_FPC";
this.paidsearchparams="gclid";
this.splitvalue="";
this.preserve=false;
// end: user modifiable
.
.
.
}
In v10, configuration settings are changed by editing the parameter that is passed to the init() method of the Webtrends object. This parameter is a JSON object comprised of name/value pairs which correspond to configuration settings. The init() method is called as part of the instantiation of the Webtrends object (webtrends.html
):
<!-- START OF SmartSource Data Collector TAG v10.2.0 -->
<!-- Copyright (c) 2011 Webtrends Inc. All rights reserved. -->
<script>
window.webtrendsAsyncInit = function(){
var dcs=new Webtrends.dcs().init({
dcsid:"dcs9x99xxxx9xxx9xx9xxxx9x_9x9x",
domain:"statse.webtrendslive.com",
timezone:-3
}).track();
};
As you can see, the name value pairs in v10 are exactly the same as the properties in v9. To transform your v9 settings, follow these steps:
Open the v9 copy of
webtrends.js
in an editorCopy the user modifiable section to a scratch buffer
this.dcsid="dcs9x99xxxx9xxx9xx9xxxx9x_9x9x"; this.domain="statse.webtrendslive.com"; this.timezone=-3; this.fpcdom=".foo.com"; this.enabled=true; this.i18n=false; this.fpc="WT_FPC"; this.paidsearchparams="gclid"; this.splitvalue=""; this.preserve=false;
Edit the scratch buffer as follows:
Remove all occurrences of "this."
Replace all semicolons ";" with commas ","
Replace all equal signs "=" with colons ":"
Remove the final comma
The result should look something like this:
dcsid:"dcs9x99xxxx9xxx9xx9xxxx9x_9x9x", domain:"statse.webtrendslive.com", timezone:-3, fpcdom:".foo.com", enabled:true, i18n:false, fpc:"WT_FPC", paidsearchparams:"gclid", splitvalue:"", preserve:false
Open the v10 copy of
webtrends.html
in an editor and examine the configuration settings:window.webtrendsAsyncInit = function(){ var dcs=new Webtrends.dcs().init({ dcsid:"dcs9x99xxxx9xxx9xx9xxxx9x_9x9x", domain:"statse.webtrendslive.com", timezone:-3 }).track(); };
Overwrite the v10 configuration settings with the settings from the v9 scratch buffer
window.webtrendsAsyncInit = function(){ var dcs=new Webtrends.dcs().init({ dcsid:"dcs9x99xxxx9xxx9xx9xxxx9x_9x9x", domain:"statse.webtrendslive.com", timezone:-3, fpcdom:".foo.com", enabled:true, i18n:false, fpc:"WT_FPC", paidsearchparams:"gclid", splitvalue:"", preserve:false }).track(); };
Migrate Customizations
Tag customizations can come in many forms. This topic will cover the simplest case of ad hoc JavaScript on the page used to set custom parameters. The recommended way to set custom parameters is using <meta>
tags. In some cases, you may need to use JavaScript for this purpose (i.e. gather custom parameter data dynamically). The v9 tag contained a method called dcsCustom
that allowed you to change parameters on a page using JavaScript. For example:
<script type="text/javascript">
_tag.dcsCustom=function(){
// extract info from to URL
_tag.DCSext.t_B02 = document.URL.split('/')[3];
_tag.DCSext.z_brand = XlateBrand(document.URL).Name;
_tag.dcsCollect();
</script>
To achieve this using the v10 tag, edit the JavaScript as follows:
- Rename references from "_tag." to "dcs."
- Incorporate custom variables using the inline HTML approach or the loader approach.
Inline HTML:
- Separate the dcs.track() method call and insert the custom variable assignments in between the dcs.init() and the dcs.track() method calls.
- Continuing the example:
window.webtrendsAsyncInit = function(){ var dcs=new Webtrends.dcs().init({ dcsid:"dcs9x99xxxx9xxx9xx9xxxx9x_9x9x", domain:"statse.webtrendslive.com", timezone:-3 }); // extract info from to URL dcs.DCSext.t_B02 = document.URL.split('/')[3]; dcs.DCSext.z_brand = XlateBrand(document.URL).Name; dcs.track();
Loader:
To use the loader approach, add awebtrendsAsyncLoad
function definition before the script block that includeswebtrends.load.js
:<script> window.webtrendsAsyncLoad=function(dcs){ dcs.DCSext.t_B02 = document.URL.split('/')[3]; dcs.DCSext.z_brand = XlateBrand(document.URL).Name; } </script> <script type="text/javascript" src="/scripts/webtrends.load.js"></script>
Change HTML Markup
You replace the v9 markup with the v10 markup. Examples of the markup can be found in the webtrends.html
file which is delivered in a .zip
file by Webtrends Tag Builder (https://tagbuilder.webtrends.com).
Delete the v9 markup
<!-- START OF SmartSource Data Collector TAG --> <!-- Copyright (c) 1996-2011 Webtrends Inc. All rights reserved. --> <!-- Version: 9.4.0 --> . . . <!-- END OF SmartSource Data Collector TAG -->
Add the v10 markup
<!-- START OF SmartSource Data Collector TAG v10.2.0 --> <!-- Copyright (c) 2011 Webtrends Inc. All rights reserved. --> . . . <!-- END OF SmartSource Data Collector TAG v10.2.0 -->
The v10 markup contains an anonymous function that loads the
webtrends.js
file by creating a script tag dynamically. This function references the external JavaScript filewebtrends.js
. Make sure that the reference agrees with the actual location on your web server. For example, if you put your JavaScript files in the "/scripts" folder, then the code should look like this:
(function(){
var s=document.createElement("script"); s.async=true; s.src="/scripts/webtrends.js";
var s2=document.getElementsByTagName("script")[0]; s2.parentNode.insertBefore(s,s2);
}());
If you are using the minified version of the tag, the name of the file is webtrends.min.js
Test
Load a test page containing your HTML markup into a browser. Using an HTTP traffic sniffing tool such as Fiddler, you should see something similar to the following:
GET 200 text/html http://mysite/webtrends.html
GET 200 application/x-javascript http://mysite/webtrends.js
GET 200 application/x-javascript http://statse.webtrendslive.com/dcs.../wtid.js?callback=Webtrends.dcss.dcs9x99xxxx9xxxxxxx9xxxx9x_9x9x.dcsGetIdCallback
GET 303 Redirect to http://statse.webtrendslive.com/dcs.../dcs.gif?dcsredirect=126&dcstlh=0&dcstlv=0&dcsdat=1324085229740&dcssip=... http://statse.webtrendslive.com/dcs.../dcs.gif?&dcsdat=1324085229740&dcssip=...
GET 200 image/gif http://statse.webtrendslive.com/dcs.../dcs.gif?dcstlh=0&dcstlv=0&dcsdat=1324085229740&dcssip=...