Web Analytics


Myst of Adobe Analytics API Segment ID

A colleage is working on the Adobe Analytics (Omniture) API and try to use some segments, so I gave him this page https://marketing.adobe.com/developer/api-explorer#ReportSuite.GetSegments to find out the segment IDs he wants to use. Then we found there is very small discrapancy in the data responded by the API and the data from the web reporting interface.

First, we found that the segment ID we got is in a very different length of the segment ID I got months ago. For the same segment, the old segment ID is something like “dw:1234567” and the new one is something like “537d53drr4b0893ab30706ac”. Turns out, if you use version 1.3, the ReportSuite.GetSegments API function will return you something like the old format. And with version 1.4, it returns the new format.

And most strange thing is, if in the data API call, you put in “dw:537d53drr4b0893ab30706ac”, the API still responds with the data, no errors. But the data could have discrapancy compared to the actual reports. However, if you remove the “dw:” prefix, it will be OK. I don’t understand why Adobe would allow “dw:537d53drr4b0893ab30706ac” and even would return some data very close to the actual report but not the same as the actual report.

This is another thing I found about how terrible the Adobe APIs are.


Reuse Google Analytics eCommerce Data for Marketing Tag via GTM

Tag-ManagerGoogle Tag Manager (GTM) makes tracking a lot easier for Google Analytics and its new version Universal Analytics. There is a new format of eCommerce tracking called enhanced eCommerce for Universal Analytics tags. To track the purchase, you would need to put some dataLayer code on the purchase confirmation page like the example below.

// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty string.
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}] }

And after that, you just need to tick a checkbox in the Universal Analytics tag in GTM to enable eCommerce tracking. There are more details on this Google document to provide guidance on implementing the eCommerce tracking: https://developers.google.com/tag-manager/enhanced-ecommerce

With a tag management solution, you should be able to reuse the data you capture to fire other tracking tags without changing the code on the pages. So, this article is to give some instructions on how to reuse the eCommerce data captured for Universal Analytics in other tags, especially marketing conversion tags.

Now, if you read the code, you can see a lot information are captured about the transaction. For example, the transaction revenue is particular interesting one for measuring the ROI. Many ad server platforms support revenue variable in the conversion tags. When you generate the tag from the ad server platform, make sure you request it. For example, a DoubleClick image tag with conversion value looks like this (with $5 conversion value):


The code is from this document: https://support.google.com/adxbuyer/answer/165288?hl=en

Let’s reuse the revenue we captured in the eCommerce code to populate the DoubleClick tag above. There are a few steps involved assuming you already have the eCommerce tracking working for Universal Analytics via GTM.

Step 1: Create a macro for the revenue

A macro is a variable in GTM which you can use in your tags. Login to GTM, and create a new macro called “Purchase Revenue”, select “Data Layer Variable” as the type, and put in “ecommerce.purchase.actionField.revenue” as the value. That means if there is eCommerce dataLayer on the page, macro “Purchase Revenue” will be the transaction revenue extracted from the dataLayer.

Step 2: Create your marketing tag

Now, the macro is ready for use on purchase confirmation. Let’s assume you want to create a DoubleClick sales conversion tag in GTM, after filling in the necessary information, on the revenue field, simply put in “{{Purchase Revenue}}” and that will populate the transaction revenue from the eCommerce tracking to the tag. You still need to setup the rules to fire the tag as usual.

The macro can also be used in Javascript so if you need it for other tags, you can do it in the same way.

That’s pretty much it. Test the tag and release it, you will have revenue in your conversion tracking in your marketing campaigns. If you have any question and comment, please submit it over the form below.


Who to trust, Web Analytics or Bitly?

In a Facebook campaign, Bitly says there are 776 clicks, and the web analytics tool says there are only 30+ visits and even less conversions. So the marketing team was thinking it must be something wrong with the tracking in the web analytics tool. But just need to have a look at the source of the clicks, yes, there are only 33 clicks from Facebook, where the link was posted. How about those 743 clicks without any referrer information? I think they are just robots crawling the web. Facebook is like a magnet attracting robots because of the fact that it constantly has new posts.



Migrate Your Google Analytics to Google Tag Manager Seamlessly with ga2gtm

If you have custom Google Analytics tracking code on your website, migrating the tracking to Google Tag Manager could be tricky because:

  1. After you replace the Google Analytics base code with the Google Tag Manager code, the custom tracking code on the web pages could cause Javascript errors because either _gaq or ga is undefined.
  2. You lose the tracking features provided by those custom tracking code.

So, one of the tasks in the migration work is to find out all the custom Google Analytics code snippets and replace them with the Google Tag Manager dataLayer code standard. Well, if you have all the previous implementation documents, and your developers have the time to deal with the changes, that shouldn’t be a problem. But things are not always that ideal.

ga2gtm is a project I created to address this issue. Basically what it does is to trigger the dataLayer code from the existing Google Analytics code, so that you don’t have to find them and replace them. All you need to do is to remove the Google Analytics base code, put the Google Tag Manager code and the ga2gtm code in. ga2gtm will convert the existing virtual pageview tracking, event tracking, social sharing tracking and eCommerce tracking into dataLayer format. Then you can pick them up in Google Tag Manager and do whatever you need to do with it. Installation is super simple, just one line of code to reference the ga2gtm Javascript file.

ga2gtm is an open source project licensed under MIT agreement. You can get it from its github repository for free here: https://github.com/GlobizSolutions/ga2gtm

Here is the installation instructions: https://github.com/GlobizSolutions/ga2gtm/wiki/Installation


Javascript to Generate a Short Unique ID

Web analytics sometimes requires generating visit ID or visitor ID for storing in the cookies. Below is the code to generate a short enough “unqie” ID for the purpose. It needs to be under 20 characters because Adobe SiteCatalyst / Omniture would only take 20 characters long serialization string. You can control the length by changing the parameter in the slice function.


I am planning to use it with the product code to form a unique serialization string. One thing needs to be clarified is that the string is random, but not really “unique”. However, it is close enough. The chance of having two same strings is pretty small if you keep the string length over 10 characters. Appending a timestamp to string would make it unique.


Big Screen Dashboards for Web Analytics: Comparison of Ducksboard, Geckoboard, Leftronic and Klipfolio

Recently I wanted to replace the in-house built big screen dashboard because it became very unstable. After some Google searches, I found Ducksboard, Geckoboard and Leftronic. They all offer free trial period, so I signed up and trialed each of them.

The first one I trialed is Leftronic. It seems it is a very popular one. My data source is Google Analytics at this point, but we are going to implement Adobe SiteCatalyst. After authorizing Leftronic to connect to Google Analytics reporting APIs, it is fairly easy to put up some widgets on the dashboards to show today’s visits, revenue, goal completions, etc. But if you are after something more complex, such as mobile visitors vs desktop visitors for the current day, you will have trouble to build it. The wdgets for Google Analytics is very simple, either a line, or a number. There is a map for the visits and visitors. There is always a triangle next to the number to show comparison of the previous period, which of course almost always in red because it is comparing current day to yesterday full day in my case. And I can’t get rid of it.

So I try Geckoboard, which is actually better. The wdgets have more options available when pulling data from Google Analytics. You can even apply segments on the data. But when it comes to line widgets, the interface always put the last number next to the line, which means it is the current hour visitors on my hourly visitors line for the current day. And Ducksboard just doesn’t work. After I built a widget, the widget fails to retrieve data so I stopped waisting time on it.

After trialing Ducksboard, Geckoboard and Leftronic, I would say Geckoboard is the winner. The dashboard interface is nicer, the widgets are more flexible in retrieving data. The map widget is definitly better than the Leftronic map widget too. But, none of them can satisfy my requirements.

Geckoboard Bashboard Screenshot

Thanks to the colleague sitting next to me recommanding Klipfolio after I told him these dashboard tools. I found Klipfolio is very flexible. It allows you to write your own Google Analytics reporting API requests, which means you can get whatever you want from Google Analytics as long as Google Analytics reporting APIs support it. And it also supports Adobe SiteCatalyst APIs, although I am not sure if that works yet. However, you can image it is not as easy to use as the above tools. The idea is you can use the APIs to build data source to pull the data from Google Analytics to a spreadsheet in Klipfolio platform. Then in the widgets, they call them Klips, you can use forumlars to manipulate the data and present them. Since you can use forumlars on the data, you can even build calculated metrics on the Google Analytics data, which is a feature Google still fails to deliver now. The data can be refresh as frequent as every minute, pretty good for close to real-time big screen dashboards if you are using Google Analytics. And it is a good tool to build dashboards can’t be built with Google Analytics built-in widgets. That is the reason at the end of the trial, I decided to go with Klipfolio and now our big screens on the walls are showing the Klipfolio dashboard I built.

Another thing I learn from the trial is that although building big screen dashboards is a fairly simple thing compared to any web analytics project, but it draws a lot of attentions in the office and people are always amused to see how the website is doing. It is a very good way to showcase web analytics and get people interested in web data.

Here are some example dashboards on Klipfolio website: http://www.klipfolio.com/resources/dashboard-examples

Klipfolio Dashboard Screenshot


Form Abandonment Tracking with Google Analytics

Forms are always the pain points in the conversion path, and form abandonment analysis is the key to find out which field causes the most pain and stops people going down the conversion path.

To be able to do form analysis, first thing you will need is to track which fields are touched by the visitors, and by aggregating the data you can find out the field causing most people to abandon the form. The usual way is to put a piece of Javascript code on the form field HTML element to trigger a tracking request when the mouse is pointed in the field. By tracking each field the visitor touched, you can see which is the last field the visitor stopped at.

The company website I work for has countless fields, that makes putting code on the form fields a mission impossible. Well, it could be done, but it might take a year considering our deployment cycles and tasks in the back log. But, I have tag management system, which I can insert Javascript bypass the deployment cycles. So I wrote this piece of Javascript which can find all the forms on the web pages, and inject the tracking Javascript on all the form fields. The following code is an example, which will trigger a Google Analytics event when someone clicks on a form field. It uses the Universal Analytics code syntax so if you are still running the older version of GA code, you will have to update the event tracking code in the example to make it work for you.

Once the code is implemented, you will find a event called “form-abandonment” in your Google Analytics event reports, and drill down by form ID then form field ID. So the forms and fields must have HTML element IDs. If you want to build a funnel with the form fields, you can change the code to trigger virtual pageview tracking requests.

Let me know what you think about it, or if you have any question feel free to contact me.

_fieldTracking = {};
_fieldTracking.ie = /*@cc_on!@*/false;
_fieldTracking.focusedFormFields = new Array();
_fieldTracking.formFieldTriggersActivated = false;
_fieldTracking.setFormFieldTriggers = function(){
	var forms = document.getElementsByTagName('form');
		var form = forms[i];
		var inputFields = document.getElementsByTagName('input');
			var field = inputFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
		var selectFields = document.getElementsByTagName('select');
			var field = selectFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
		var textFields = document.getElementsByTagName('textarea');
			var field = textFields[j];
			if(field.type != 'hidden') _fieldTracking.addListener(field, _fieldTracking.trackFieldFocus);
_fieldTracking.addListener = function(element, func) {
		element.attachEvent('onfocus', func);
		element.addEventListener('focus', func, false);
_fieldTracking.trackFieldFocus = function(e){
		var currentElement = (_fieldTracking.ie) ? e.srcElement : e.target;
			var p = _fieldTracking.focusedFormFields.indexOf(e.target.form.id+'#'+e.target.id);
			if(p == -1){
				_fieldTracking.focusedFormFields[_fieldTracking.focusedFormFields.length] = e.target.form.id+'#'+e.target.id;
				ga('send', 'event', 'form-abandonment', e.target.form.id, e.target.id);
if(typeof _pageId != 'undefined' && _pageId.indexOf('quote')>=0){
	if(!_fieldTracking.formFieldTriggersActivated) _fieldTracking.setFormFieldTriggers();
	_fieldTracking.formFieldTriggersActivated = true;

How Many Websites Are Using Google Analytics Or Adobe Omniture?

I guess this is a common question in the minds of people who work in web analytics. NerdyData is a website can give us a peek into the answer. It can search Javascript code snippet on websites, which means if we search for code unique enough to identify the web analytics solution, we can see how many websites are running with Google Analytics code snippet or Adobe Omniture code snippet. So I did that, and found a very interesting answer.

16,641,486 websites loads Google Analytics code library which means they are using Google Analytics according to this search result: https://search.nerdydata.com/search/#!/searchTerm=google-analytics.com/ga.js/searchPage=1/sort=pop

And 265,995 websites has s.pageName on the web pages which indicates they are using Omniture SiteCatalyst according to this search result: https://search.nerdydata.com/search/#!/searchTerm=s.pageName/searchPage=1/sort=pop

Considering Omniture is so expensive, it is actually quite a big number. Note that one client could have multiple websites so it is not saying that Omniture has 265,995 clients. Anyway, very interesting figures.


Javascript to Identify Landing Page

In web analytics implementation, we often need to implement some special tracking code for the landing pages. For example, firing adserver tags, applying some logics to the campaign code, etc. I just created this piece of Javascript code that can detect the referral URL hostname, and compare it against the current page hostname to check whether the referral URL is on the same website. If they are different, then I consider it is a landing page view because the traffic is from outside of the current website.

Here is the code:

if(location.hostname != document.referrer.match(/\/\/([^\/]*)\//)[1]){
	console.log('this is a landing page');
	console.log('not a landing page');

To test the code, you can copy and paste it in the browser console and execute it.

© Copyright 2014, All Rights Reserved