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!

Comments

  1. Tobias says

    Great article Ram, i really appreciate your effort to make it as easy understandable as possible.
    I’ve got one question open: we’re working with the datalayer and are using these variables in Site Catalyst for example as “pageType”. Is it possible to keep the page level code inside the s_code.js and fill these variables this way? Looking forward to your answer. Best regards and keep it going!

    • says

      Thank you Tobias 🙂 Absolutely, you can do that. But just keep in mind that if you are placing your page level code inside s_code file it will fire on each page so just use a conditional statement and place the following code inside s_doPlugins function.

      if(dataLayer.pageType){
      s.pageType = dataLayer.pageType;
      }

      Please let me know if you need anything else.

  2. Angus Gough says

    Hi Ram,

    This is a very useful article thanks. I’m trying to track on-click events dynamically for adobe to go into the custom link report. Do you have any advice on how to do this?

    Thanks!

    • says

      Hi Angus,

      Sorry for the delay. Tracking on click events should be pretty easy using GTM. You can use the inbuilt triggers on GTM to configure your on click event and the tag type should be a HTML tag type and the code should look something like below.

      var s = window.s;
      s.tl(true,’o’,’Example Track Event”);

      The above code should send the hit to a custom link report and the “Example Track Event” will be the entry in your custom link report.

      • Angus Gough says

        Hi,

        Thanks for getting back to me.
        We have implemented this and are seeing the data in observepoint as a custom link. However, we are seeing the click fire twice for each actual click.
        We are using the click text as a trigger. Also we have seen that if you just have a console.log function in the tag and not the s.tl, the click tag fires only once, however if we have the s.tl function in the tag it will fire twice. This is seen in both GTM preview and observepoint. The only difference in the observepoint console is in the second click tag firing we have object id and page id showing which we don’t have with the first click tag.
        Do you have any idea why we might be having this double click effect?

        Thanks
        Angus

        • says

          Hi @angusgough:disqus,

          I think it can be caused due to many things. For example, if you enable external link tracking without defining the internal link filters, all your link clicks will be considered as a external link click. This might be one case. So it would be better if you can give me the URL to identify what exactly is the problem?

          Regards
          Ram

Leave a Reply

Your email address will not be published. Required fields are marked *