Tag Management – Google Analytics for e-commerce Implementation

Here, we will implement Google analytics tracking using tag management tool. We will use QuBit OpenTag to implement Google analytics and track element such as “add to cart” button of any product page of e-commerce store.
QuBit Open Tag is an open core tag management system, with a free hosted open source version that you host on your server and a paid hosted version with additional features.
Implement the Google analytics tracking for e-commerce store using QuBit OpenTag.

  1. Create a container

    A Container is a group tags/scripts represented as a single java script which allows conditional execution for any given script/tag.

    OpenTag Admin panel

  1. Add a new script

    To implement simple Google analytics tracking, this script is used

    <script type=”text/javascript”> var _gaq = _gaq || []; _gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]); _gaq.push([‘_trackPageview’]); (function() { var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s); })(); </script>

    The snippet above represents the minimum configuration needed to track a page asynchronously. It uses _setAccount to set the page’s web property ID and then calls _trackPageview to send the tracking data back to the Google Analytics servers.Copy the above javascript code, replacing UA-XXXXX-X with your web property ID. Paste this snippet into your website template page so that it appears before the closing tag.

To implement Google analytics tracking using DOM id/Class

If we want to track the elements of the e-commerce store such as “Submit” then we can use the advance Google analytics tracking using the DOM id or class of the element.
For example, we want to track the click event on “Submit” button of your e-commerce store then we have to identify the id or class of that element so that we can bind an event with that element by using its id or class.

Tracking the Submit Button
HTML of the Submit Button:

• Find the id or class of the “Submit” button.
The below example is a HTML code of a page which includes “Submit” button with id=”submit”. This id name is used in the jQuery for tracking the “submit” button.

<div>
<input type="text" name="Name">
<input type="text" name="mobile">
<input type="image" src="images/btn-submit.jpg" id="submit" name="Submit">
</div>
jQuery/javascript for tracking “Submit” Button:

• Use the id or class of the element inside the jQuery function.
The below javascript code use the id name (submit) of the “Submit” button and binds a click to the button for Google analytics tracking.

<script>
var _gaq = _gaq || [];
try{
    jQuery.noConflict();
} catch(e){};
jQuery(document).ready(function() {
jQuery('input#submit').bind('click',function(){
        _gaq.push(['_trackEvent', action, opt_label, opt_value, opt_noninteraction) 
   });
});
</script>

This code should be included in the Inline HTML text box or you can also call a Javascript using the URL option in script source of Qubit OpenTag.

  1. Insert your SCRIPT in the inline HTML text BoxAdd new Script
  2. Filters: A filter is the logic that decides whether a tag should be served on specific page(s) or all pages. The logic is based on the URL of the page the container tag is implemented on.By default when adding a new script to a container, there will be an INCLUDE ALL filter. Users can add, remove and change the priority of filters.
  3. Save Script: After adding all the parameters save the script.
  4. COMMIT: If you have done changes in any existing container then commit the changes by clicking the “COMMIT” button.Any consecutive saves will take on average about 5 minutes (maximum 15 minutes) to update and propagate via Amazon Cloud Front CDN.
  5. </>EMBED: Click on “</EMBED>” and get the script and paste it in header of all pages. If it’s common template then you can paste it in main template of site.If the script is already on the page, then avoid this step.

 

The following two tabs change content below.
Yaman Patel

Yaman Patel

Yaman Patel is Solution Consultant guiding Organization in Marketing Analytics Usecases. He is focused towards solving genuine problems in MarTech Space. Being a Developer by heart, He is one of the proud pioneers of Tatvic's dataLayer automation tool(DLAT). He is keen on learning business intelligence technologies.He loves to travel and explore new places.
, , ,
Previous Post
PHP code to check existence of Google Analytics on a webpage and extract UA-ID
Next Post
Infographic: Call-to-action – Guidelines and practices to ensure more clicks

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu