Skip to main content
knowledgecenter.2checkout.com

Google Analytics Integration for Default Flows (without GTM)

Overview

analytics.js library is a JavaScript library that helps the vendor measure how users interact with their website. This guide explains how to add analytics.js to your website.

If you don’t have experience with code, you might want to seek assistance from a developer for the following steps.

Add the Google Analytics code to the 2Checkout template

Integrate the code below (also called JavaScript tracking snippet) into your website's templates to enable analytics.js. The code snippet contains the data layer and must be added to the template file in the JavaScript code section. Depending on your having a custom domain or not, the appropriate code must be added.

Add the JavaScript tracking snippet code near the top of the <head> tag and before any other script or CSS tags. Also, the ‘UA-123156882-1’ highlighted string below needs to be replaced with your Google Analytics property ID (or tracking ID).

If you don’t know the Google Analytics property ID, you can find it here.

The JavaScript tracking snippet code can be pasted after the existing code, as shown in the image of the JavaScript code section of the Control Panel template files below.  

javascript code.png

Implementation with a custom domain

If you have a custom domain, the below JavaScript tracking code will be added in the JavaScript code section of your Merchant Control Panel template files:

<script> 
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 
ga('create', 'UA-123156882-1', 'auto'); 
ga('require', 'ec'); 
  if (omniture_vars.BILLING_CURRENCY) {ga('set', 'currencyCode', omniture_vars.BILLING_CURRENCY)};
if (omniture_vars.PAGE_NAME == "product"){   
 for (var i=0;i<omniture_vars.CART_PRODUCTS.length;i++)   
 {        
    ga('ec:addProduct', {                    
     'id': omniture_vars.CART_PRODUCTS[i].ProductCode,                     
     'name': omniture_vars.CART_PRODUCTS[i].ProductName,                    
     'category': omniture_vars.CART_PRODUCTS[i].ProductCategory,                    
     'brand': omniture_vars.CART_PRODUCTS[i].ProductGroup       
    });         
   }      
   ga('ec:setAction', 'detail'); 
}
 else if (omniture_vars.PAGE_NAME == "cart")
 {   
  for (var i=0;i<omniture_vars.PRODUCT_ADDED_DETAILS.length;i++)   
  {        
    ga('ec:addProduct', {                   
     'id': omniture_vars.PRODUCT_ADDED_DETAILS[i].ProductCode,                    
     'name': omniture_vars.PRODUCT_ADDED_DETAILS[i].ProductName,                    
     'category': omniture_vars.PRODUCT_ADDED_DETAILS[i].ProductCategory,         
     'brand': omniture_vars.PRODUCT_ADDED_DETAILS[i].ProductGroup       
    });         
   }      
     ga('ec:setAction', 'add'); 
}
 else if (omniture_vars.PAGE_NAME == "checkout" || omniture_vars.PAGE_NAME == "checkcart")
 {   
  for (var i=0;i<omniture_vars.CART_PRODUCTS.length;i++)
{        
    ga('ec:addProduct', {         
     'id': omniture_vars.CART_PRODUCTS[i].ProductCode,
     'name': omniture_vars.CART_PRODUCTS[i].ProductName,         
     'category': omniture_vars.CART_PRODUCTS[i].ProductCategory,          
     'brand': omniture_vars.CART_PRODUCTS[i].ProductGroup,         
     'quantity': omniture_vars.CART_PRODUCTS[i].ProductQuantity       
    });         
   }      
    ga('ec:setAction', 'checkout',{'step': 1}); 
}
 else if (omniture_vars.PAGE_NAME == "verify")
 {   
  for (var i=0;i<omniture_vars.CART_PRODUCTS.length;i++)   
  {        
    ga('ec:addProduct', { 
        'id': omniture_vars.CART_PRODUCTS[i].ProductCode, 
        'name': omniture_vars.CART_PRODUCTS[i].ProductName,        
        'category':omniture_vars.CART_PRODUCTS[i].ProductCategory,           
        'brand': omniture_vars.CART_PRODUCTS[i].ProductGroup,          
        'quantity': omniture_vars.CART_PRODUCTS[i].ProductQuantity       
    });         
   }      
    ga('ec:setAction', 'checkout',{'step': 2}); 
}
else if (omniture_vars.PAGE_NAME == "finish" && omniture_vars.PURCHASE_COMPLETE === true)
{   
  if (typeof myOrder != "undefined" && typeof myOrder.productsPrices != "undefined")
  {
    for (var k=0;k<myOrder.productsIds.length;k++)
    {
      ga('ec:addProduct', {
        'name': myOrder.productsNames[k],         // Name or ID is required.
        'id': myOrder.productsIds[k],
        'price': myOrder.productsPrices[k],
        'category': "",
        'quantity': myOrder.productsQuantities[k]
      });
    }
  }  
ga('ec:setAction', 'purchase', {     
   'id': omniture_vars.ORDER_REFNO,     
      'revenue': myOrder.totalPrice,     
            'tax': myOrder.tax    
   });
}
ga('send', 'pageview');</script>

Implementation without a custom domain 

If you are using the secure.2checkout.com domain, the additional JavaScript code below must be added to the second paragraph of the Google Analytics code shown above, after the snippet ga('create', 'UA-123156882-1', 'auto');  and before the snippet ga('require', 'ec');.

Thus, the second paragraph will have the following form: the first yellow highlighted field needs to be replaced with your Google Analytics property ID (or tracking ID), and the second highlighted field needs to be updated with your own website domain.

ga('create', 'UA-123156882-1', 'auto', {'allowLinker': true}); 
ga('require', 'linker'); 
ga('linker:autoLink', ['mywebsite.com'] );
ga('require', 'ec');  

This additional code above is required for cross-domain tracking so that the visitor on your own website is recognized as the same visitor when entering the 2Checkout template.  

Step 2: Set the Google Analytics JavaScript code on your own website

Implementation with a custom domain

You should use the default Google Analytics tracking script for analytics.js provided by Google, which has the following form (the string highlighted in yellow must be updated with the property ID of the vendor):

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Implementation without a custom domain 

If you are using the secure.2checkout.com domain, the following settings must be applied: the Google Analytics JavaScript tracking code on your own website must be updated and have the following form (highlighted in yellow is the Google Analytics property ID that needs to be replaced with your own GA property ID code).

<script>  
(function(i,s,o,g,r,a,m){i['GoogleAn alyticsObject']=r;i[r]=i[r]||function(){  
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),  
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)  
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-123156882-1', 'auto', {'allowLinker': true});  
ga('require', 'linker');  
ga('linker:autoLink', ['secure.2checkout.com'] );  
ga('send', 'pageview');
</script>

Below are the elements that are different from the default Google Analytics analytics.js tracking code and that enable cross-domain tracking. This code snippet is integrated into the rest of the code provided in the Google documentation here

{'allowLinker': true});  
ga('require', 'linker');  
ga('linker:autoLink', ['secure.2checkout.com'] );

Sending MyOrder Data to Google Analytics

By default, the myOrder object is displayed only for orders with payments authorized instantly (this includes usually credit cards and PayPal), after the payment is complete (transaction needs to be authorized successfully). To have the myOrder object available for all placed orders regardless of the payment status (to send revenue to Google Analytics based on myOrder.TotalPrice, or more offline payment methods orders), follow the steps below.

  1. Log in to your Merchant Control Panel account.
  2. Go to Setup → Ordering Options.
  3. Scroll down to the After sale message area and check the checkbox for the Show message for all placed orders option.

web analytics in Merchant Control Panel_2.png

3. Click Save settings at the bottom of the page.

A JavaScript object called myOrder is available on the ‘Thank you’ page providing information about the purchased products including ID, quantity, name, price, etc.

To see information about orders in Google Analytics, follow these steps:

  1. Log in to your Merchant Control Panel account.
  2. Navigate to Setup → Ordering Options and click on the Analytics tab.

web analytics in Merchant Control Panel_1.png

3. Scroll down to the Tracking script section and add a code snippet (for example add <div></div>).

4. Apply the code to all languages or to the languages for which you want your template to be tracked.

5. Click Save at the bottom of the page.

web analytics in Merchant Control Panel_3.png 

Enable Enhanced E-commerce tracking in Google Analytics

In your Google Analytics Control Panel, go to Admin → All Web Site Data → Ecommerce Settings and enable both the Enable Ecommerce and the Enable Enhanced Ecommerce Reporting buttons, as shown in the image below.

ecommerce setup.png