Datalicious Blog - Data Driven Marketing
Filed under

javascript

 

Omniture Site Catalyst variable declaration and naming convention

So what's the big deal?
I continually get to look inside the Site Catalyst implementations of various companies as they struggle to extract value from the product. Those implementations are usually done in such a way that future upgrades are extremely painful and time consuming, if not virtually impossible. Javascript page tagging is messy, but you can make it much cleaner by following the tips below.

Standard Practice and why you can do much better
Most web sites have a block of Omniture variables declared in the page code. For example, somewhere in the body, you may see something like:

s.pageName="site:some page";
s.prop12="calculator";
s.eVar14="widgets";
s.events="event2";

Lets say that prop12 is looking at tool usage and eVar14 is looking at product category affinity. The above will work fine, the variables will be populated in the scode and sent with the request as expected. But what happens when a developer comes back in 2 years time and wants to switch the usage of eVar14 or prop12? The variables are hard-coded everywhere, they appear in lots of templates, a few microsites, and are straight hard-coded on some custom pages, it's a complete nightmare.

The Solution
Call the variables something meaningful to you instead, don't use the Omniture naming convention in your HTML, this makes future changes very messy. Once you have your own variable names you can then transfer the information to the relevant site catalyst variables in the scode file.

Useful naming convention has several benefits:
1. It makes sense to the developer and hence they are less likely to screw it up
2. If you later want to make a change, that's fine, you simply make one change in the scode file and all the old usage will cease immediately as the new usage takes it's place. Switching a variable for your whole site/s can be done in minutes.

Example:
On page:
s.pageName="site:some page";
scToolUsage="calculator";
scCatAffinity="widgets";

In the scode, inside the s_doPlugins(s) function:
s.prop12=scToolUsage;
s.eVar14=scCatAffinity;

In the scode, outside the s_doPlugins(s) function (this makes sure the variables are declared in case they are not declared on the page):
scToolUsage="";
scCatAffinity="";

What about events?
Many events are page related (i.e. a registration event is triggered on the registration confirmation page). So why declare it on page in the variable section? You may want to change it later. Again this is something that can be easily dealt with in your scode file. If you use good s.pageName notation, you can trigger events specifically when certain pages are loaded. Below is an example using the s.apl plugin to append event2 to the s.events variable whenever the pageName contains "registration-thank-you". If you later decide to change the usage of event2 you can once again make a single change in the scode file and you're done, you don't have to worry about searching for code across your site/s.

Example code inside the s_doPlugins(s) function:
var scRegistration=new RegExp("registration-thank-you");
    if (scRegistration.test(s.pageName)) {
        s.events=s.apl(s.events,'event2',',',1);
    };

In short, centralise all the code maintenance you can in your scode file, this makes your developers jobs easier and also provides the freedom and flexibility to make changes quickly moving forward. Secondly, the pageName variable should be your one constant on-page declaration, use it wisely and it can be very powerful. For more tips on s.pageName convention best practice, see our earlier blog post on top 5 tips for deploying Omniture SiteCatalyst. For more information on Site Catalyst deployments, drop me a line at hogilvy@datalicious.com

Loading mentions Retweet
Email this post
Filed under  //   best practice   code   hamish   javascript   ogilvy   omniture   site catalyst   tracking  
Posted by Hamish Ogilvy 

Comments [0]

Atomic Labs Pion: Implementing Omniture without JavaScript page tags

Update: Datalicious now Atomic Lab Pion reseller and integration partner for Australia.

Is implementing and updating Omniture page tags an issue for you? Atomic Labs's Pion Reactors provides a solution to process your website and campaign data server side and then insert it via the Omniture API. They also currently support sending data to Google Analytics and Unica.

In contrast to using a central JavaScript file to dynamically populate the Omniture variables based on page URLs, the Atomic Labs software taps into the network traffic stream and can then use any text within the transmitted data to create/modify additional variables and events via processing rules. At the same time you can also enrich your visitors click stream data from the website with profiling information from your CRM database using simple SQL queries and all in real-time, a great first step towards single customer view.

Why would you want to implement this?

  1. Bypass your developers, staging, testing, etc. Increase your speed to new insights
  2. Deploy new analytics without risking errors on your web site
  3. Hide your tracking data from prying eyes
  4. Modify your CRM in real time. Create targeting algorithms to better serve your customer as well as lead queues for call center staff, all on the fly.
  5. Enrich your analytics with data you would not allow in javascript, such as "profit on a sale transaction".
  6. You won't lose data because of analytics request delays

Check out the Atomic Labs website below or email Hamish at hogilvy@datalicious.com for more information and implementation help.

Loading mentions Retweet
Email this post
Filed under  //   CRM   google analytics   hamish   javascript   network   ogilvy   omniture   pion   site catalyst   SQL   tools   tracking   unica  
Posted by Hamish Ogilvy 

Comments [0]

Testing Javascript code live in production without affecting live traffic

Save yourself some time, reduce your frustration, remove code deployment risk and improve your insight by using our technique to quickly test and deploy new web analytics code on your site without the need for staged testing.

Fear driven motivation ...

Quite frequently we needed to test site updates on a staging server for fear of breaking the production site, upsetting customers and losing revenue. This seems like a really good idea, except that when the files are pushed live things don't always happen quite as expected. Staging sites are never the same as production, we've seen perfect copies have issues with cookies due to the different domain, poor version control, different asset location and other network issues like load balancing amongst a range of other problems, the bottom line is they are never the same, period. 

In addition to the testing issues, we also need to deal with the fact that assets like Javascript are cached by some browsers. Code roll outs are not immediate, but dribble out over a period of up to a month as browsers invalidate their cache. This is a scary proposition for people relying on the analytics data, especially when frequent updates are required. 

Efficiency driven motivation ...

In addition to this, for many of our clients (e.g. banks) we have rare deployment windows as far as 6 months in the future (yes this is not an exaggeration) and aren't allowed to test code outside their building. We have other clients where we need to send them code and wait for a testing response when they can allocate the resources. The feedback loop becomes very slow and sometimes very minor code issues can cause significant deployment delays. The loss in revenue and general inability to find answers to key business questions in a timely manner cannot be underestimated.

Our background is in analytics and strategy, so we're usually dealing with Javascript files for tracking purposes, but the same issues occur with all asset based code updates. We want a simple means to test and deploy new code without making any on page changes or requiring testing in a staging environment. Maybe i'm lazy, but i don't want to test the same code twice! This initially sounds a bit ambitious, but it's actually pretty simple.

The solution ...

We use a single controlling file to include all other Javascript assets. The single file has the ability to switch between different Javascript file versions based on the existence of a cookie (created from a URL parameter when testing is required). This single file is also utilised to control the file version of the asset files without making any on page changes.

Advantages

  1. No on-page changes are required for Javascript updates EVER
  2. All updated files roll out instantly to everyone, there is no caching lag. Roll backs are just as easy.
  3. Testing on the live site can be performed without ever affecting a single other user. Staging sites are not required.
  4. Testing can be performed remotely (wherever the production site is accessible).
  5. Risk of web site down time or customer irritation is greatly reduced.
  6. Time to go live is significantly reduced.
  7. Development costs are significantly reduced.
  8. Javascript file names can include a version number, this greatly reduces confusion around version control.

Implementation

If you know Javascript and you're looking for an example, check out below. If you need more explanation, then drop us a line.

A. CONFIG
- Production server base location (e.g. www.client-site.com/js/)
- Test Server A base loca tion (e.g. www.your-live-test-site.com/client-folder/js/)
- Test Server B base location (e.g. www.client-site.com/js/live-test/). Maybe they want to test too!
- File version (or name, e.g. scode-v1.js)

B. DEFINE INCLUDE FUNCTION and OTHER BASE FUNCTIONS
These functions include setting and retrieving cookies, reading URL parameters into variables and including other javascript files.

function gqp(name){name=name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");var regexS="[\\?&]"+name+"=([^&#]*)";var regex=new RegExp(regexS);var results=regex.exec(window.location.href);if(results==null)return"";else return results[1];}
function setCookie(c_name,value,expiredays){var exdate=new Date();exdate.setDate(exdate.getDate()+expiredays);document.cookie=c_name+"="+escape(value)+((expiredays==null)?"":";expires="+exdate.toGMTString());}
function getCookie(c_name){if(document.cookie.length>0){c_start=document.cookie.indexOf(c_name+"=");if(c_start!=-1){c_start=c_start+c_name.length+1;c_end=document.cookie.indexOf(";",c_start);if(c_end==-1)c_end=document.cookie.length;return unescape(document.cookie.substring(c_start,c_end));}}return"";}
function include(filename){document.write(unescape("%3Cscript src='" + filename + "' type='text/javascript'%3E%3C/script%3E"));}


C. ADD LIVE TESTING FUNCTIONALITY
Some example code is shown below. The test URL parameter we're looking for is called "datalicious". So a URL like http://www.client-site.com/?datalicious=test will trigger the code to include from the test location instead of the production server. The default production code base is stored in a variable called "datClientCodebase"

var datURL=document.location.href.toLowerCase();
datTest = gqp('datalicious');
if (datTest == 'test') {
    setCookie('datCookie', 'test', 1);
}
if (datTest == 'client-name') {
    setCookie('datCookie', 'client-name', 1);
}
datCookieValue = getCookie('datCookie');
if (datCookieValue == 'test' || datTest == 'test' || datCookieValue == 'client-name' || datTest == 'client-name') {
    // This will use the test files on your server folder livetest
    if(datCookieValue == 'test' || datTest == 'test'){
        var datCodebase = '//www.your-server.com/client-name/js/livetest/';
    }else{
        // This will use the test files on the client-name server folder livetest
        var datCodebase = '//www.client-name.com.au/js/livetest/';
    }
} else {
    // Your server will use the production dir (this is done so you don't need a different file version on your
    //site), otherwise the client code base is used, which is the default normally
    if (datURL.indexOf('your-server.') > -1) {
        var datCodebase = '//www.your-server.com/client-name/js/';   
    } else {
        var datCodebase = datClientCodebase;   
    }
}

D. INCLUDE THE FILE
The following line of code takes the base file location and the file name (version), combines them and requests the desired file.

include(datCodebase + datScode);

E. TRIGGER
Now the file has been included, if there are any analytics functions, like with the Omniture scode, or google analytics page tracker, this part of the code can decide when these functions are executed. Normally we have conditions here so the function can be triggered at either the top or the bottom of the body.

F. CALL THE CONTROLLING FILE
Your web sites can now include this base file, but we recommend you use a cachebuster to ensure any updates you make the to base file propagate in a timely manner (we use 24 hours, but you can set to whatever you want). A code example is shown below, this would appear on all site pages:

<!-- BEGIN CACHE BUSTER -->
<script type="text/javascript">
var cacheBuster="";
var cbd=new Date();
var cbm=new Date();
var cby=new Date();
cbd=cbd.getUTCDate();
cbd=cbd.toString();
cbm=cbm.getUTCMonth()+1;
cbm=cbm.toString();
cby=cby.getUTCFullYear();
cby=cby.toString();
cacheBuster=cbd+":"+cbm+":"+cby;
</script>
<!-- END CACHE BUSTER -->

<!-- BEGIN INCLUDES -->
<script type="text/javascript">document.write('<scr'+'ipt type="text/javascript" src="//www.client-site.com/js/datalicious.js?cb='+cacheBuster+'"></scr'+'ipt>')</script>
<!-- END INCLUDES -->

Email Hamish at hogilvy@datalicious.com if you need help with your implementation.

Loading mentions Retweet
Email this post
Filed under  //   analytics   best practice   code   customization   google analytics   hamish   javascript   ogilvy   omniture   site catalyst   tips   web  
Posted by Hamish Ogilvy 

Comments [0]

Top five tips for deploying Omniture Site Catalyst Javascript

Below are some pretty basic tips to Site Catalyst setup, they may seem straight forward, but i am continually surprised at how poorly Omniture is set up, so maybe they're not so obvious!

1. Have one scode file

Duplicating the scode file is painful and you will eventually make mistakes. Keep all your code in one file.

2. Use a cachebuster

This will ensure your javascript code updates propagate quickly. Otherwise your existing users may not reflect the changes, which can complicate and confuse reporting. A cachebuster automatically adds a parameter to the end of the javascript file reference, which forces it to be reloaded. i.e. scode.js?cb=1234

3. Make it protocol independent

Don't put "http:" in your file reference, this will allow the javascript to work for either http or https. i.e src="//www.example.com/js/scode.js"

4. Use the s.pageName variable properly
This is by far the most important thing to set, i can't even stress that enough. Any extra effort to get it right is worth it. Your pageName should preferably follow a set structure so your javascript can utilise it fully. If you get this right, your reports will immediately become more powerful. We typically follow a structure like the following:
site:sub-section:sub-sub-section:sub-sub-sub-section

This should follow the site directory structure where possible. i.e. www.site.com/sub-section/sub-sub-section/sub-sub-sub-section

By breaking this up and putting it into several props and eVars, you will be able to look at success events at a site, sub section, sub sub section and sub sub sub section level, which is very useful. You will also be able to trigger certain events based on these values. Code example below, which should also be copied from props to eVars:

var scSection=s.split(s.pageName,':');
s.prop1 = scSection[0];
if (typeof scSection[1] != 'undefined')
s.prop2 = s.prop1 + ":" + scSection[1];
if (typeof scSection[2] != 'undefined')
s.prop3 = s.prop2 + ":" + scSection[2];
if (typeof scSection[3] != 'undefined')
s.prop4 = s.prop3 + ":" + scSection[3];


The output of the above will be:
s.prop1 = site
s.prop2 = site:sub-section
s.prop3 = site:sub-section:sub-sub-section
s.prop4 = site:sub-section:sub-sub-section:sub-sub-sub-section

5.
Minimise the on page javascript
Any logic you can use to trigger events based on the pageName, the URL or section variables, will make things so much easier. If you can get code off the individual pages and keep all the logic in the scode file, you will greatly simplify any deployments and rollbacks. For some things you can't avoid putting code on individual pages, but it's suprising how often it can be avoided.

An example might be a segmentation rule that will label someone once they have stayed for at least 2 pages in a particular site section. For things like this, very small changes to the scode can be very powerful, if you paid attention to tip 1 above, they're also immediately site wide!

If you need help with your implementation, email Hamish at hogilvy@datalicious.com.

Loading mentions Retweet
Email this post
Filed under  //   analytics   code   customisation   hamish   javascript   ogilvy   omniture   scode   site catalyst   tips   web  
Posted by Hamish Ogilvy 

Comments [7]