Adobe Analytics implementation using Google Tag Manager (GTM)?

Adobe Analytics (often referred to as Adobe SiteCatalyst or Omniture) is an enterprise web analytics solution which has so many advanced features when compared to a free solution like Google Analytics. It is part of the Adobe Marketing Cloud which comes with a lot of varied products. Adobe Analytics is pretty famous in the enterprise web analytics market. Implementing Adobe Analytics is considered a fairly technical process and Adobe awards a certificate for those who qualifies an exam with questions related to Adobe analytics implementation. These people are called Adobe Certified Experts.

Adobe Analytics Implementation using Google Tag Manager

In the previous posts we have seen how to implement facebook custom audience pixel using Google Tag Manager (read as GTM). Marketing pixels have a fairly straight forward implementation whereas advanced Analytics tools like SiteCatalyst has different important things that need to be kept in mind. So let us see how to implement Adobe analytics from scratch on a website using GTM.

Download the code from Adobe analytics code manager

Log on to your adobe analytics platform. Go to the Admin tools and click on the code manager. You will be presented with the list of all the versions of the base code (which we used to call s_code) which is called AppMeasurement. This AppMeasurement differs from platform to platform. You have a different AppMeasurement for JavaScript implementation and a different version for PHP implementation. In the present post we are going to see the JavaScript implementation since most of the modern mobile browsers support JavaScript. Go ahead and download the AppMeasurement for JavaScript.

You should be able to see a zip file that is downloaded which should have the following file structure.

appmeasurement-file-structure


In our present implementation, we will only be using AppMeasurement.js. So, extract that file alone on to your computer and proceed.

Compile your base code

Edit your AppMeasurement.js and add the following code at the beginning of your code.

Do all the necessary configuration in the above file such as adding necessary plugins, modules and custom global code inside the doPlugins function. We will look into the concept of necessary plugins and modules in another pots. Once you are done with that, the next task is to host this code. The reason behind this is due to the limitation in GTM which is the length of code inside a custom HTML tag cannot exceed 15,360 characters which you can see in the below screenshot. Unfortunately AppMeasurement is lengthier than that. I hope Google changes this limit and allow people to host bigger code.

google-tag-manager-limitation-code-length

Hosting the code on your webserver (Suggested approach)

This is straight forward. Save the above code with a file name desirably “s_code.js” which we are used to. Upload this file into your web server and get hold of the path of the file. The hypothetical path I am considering for now is “/js/s_code.js” inside my website fil directory. So, the absolute path becomes http://example.com/js/s_code.js This is the hosted file path

Hosting the code on Google Drive (Doesn’t work anymore)

Yes, you heard it right. You can host JavaScript, CSS or for that matter any kind of file on Google drive and hotlink them. This is such a cool feature which many people are not aware of.

1. Open Google Drive and navigate to a directory of your choice

2. Click on the New Button and click on File upload and upload your “s_code.js” file

google-drive-upload-file-js

3. Once the file is uploaded, now we need to modify it’s share settings so that we can hotlink it in our code. Right click on the file and click the Share option, now you will be presented with the share settings. Click on Advanced menu and change the status to Public. Follow the below pictures to know the same.

googledrive-js-file-share-public-1

googledrive-js-file-share-public-2

googledrive-js-file-share-public-3

googledrive-js-file-share-public-4

4. Copy the URL of the file which was highlighted in one of the above pictures which look something like https://drive.google.com/file/d/0B1BlCqeqiqzOcnVDa2hlaG5BZ0k/view?usp=sharing

5. Now take out the unique code in the URL which was highlighted in bold as shown above and construct a URL as below
http://googledrive.com/host/0B1BlCqeqiqzOcnVDa2hlaG5BZ0k and open this URL in your web browser which will be directed to another URL which looks like https://8e42e23bdad7beea63e64e630be2b469f29535c6.googledrive.com/host/0B1BlCqeqiqzOcnVDa2hlaG5BZ0k This is the hosted file path

Create a Custom HTML Tag for Basecode using s_code.js

gtm-sitecatalyst-basecode-custom-html-tag

Copy the following code, replace the JavaScript file source with your hosted s_code.js file path. I have used Google drive file path. Place this code in your Custom HTML Tag.

Important: Do not forget to enable document.write. Once you have enabled document.write, click on Advanced options and enter a number in your Tag firing priority. This is very important since your page level code which fires your sitecatalyst tags needs to be loaded after the AppMeasurement code. So enter a bigger number for this tag something like 10.

Select “All Pages” as your trigger to make the base code available on all pages.

Create a custom HTML Tag for Page Level Code

gtm-sitecatalyst-pagelevel-code-custom-html-tag

Use the sample code below and place it on a custom HTML Tag in GTM.

Important: Enable document.write and give a lower number than 10 in your tag firing priority since we have given 10 to the base code. I have given it 1 since if you need custom code for certain pages, you can create those tags in future and give them a number between 1 and 10.

Select “All Pages” as your trigger and save the tag

Configure the above code to suit your requirements. Remember this is the global code which we want to fire on all pages, so configure the variables which need to be fired on all the pages.

Note: Wrap the Javascript code snippets in <script> tags inside a Custom HTML Tag

That’s all! You are done! Publish your changes. Now go to your website and use any HTTP Traffic analyzer to see tags firing properly. Or use the Adobe’s Digital Pulse Debugger bookmarklet to test the tags. You can learn how to install and use Adobe digitalpulse debugger here.

UPDATE: Google has removed the hotlinking the files from Google drive, so the method I have mentioned above will not work any more. It is better to host the scode or AppMeasurement on your own server or use sites.google.com and create a site, add a file cabinet and upload the scode and link it.

Ram Manohar

Author: Ram Manohar

Independent Digital Analytics and Tag Management Consultant. Web Analytics Expert with 8+ years of experience. Well versed in Digital Analytics, Web Programming, WordPress and Digital marketing. Contact me for consulting!