In this Article
Overview
Google Tag Manager (GTM) makes managing your analytics, marketing and other scripts much easier for the layman. It also includes version control, preview features and an excellent debugging tool.
This guide demonstrates how to implement Google Analytics with GTM and includes eCommerce, enhanced eCommerce site search and user group tracking. After completion, you will be able to measure on your website:
- Product Impressions
- Product Clicks
- Views of Product Details
- Additions or Removals from a Shopping Cart
- Promotion Impressions
- Promotion Clicks
- Checkout Steps
- Purchases
Before you Begin
Ensure you already have a Google Analytics and Google Tag Manager account before proceeding with this guide.
-
Log in to your Google Analytics account.
-
Select Admin from the menu in the lower left corner.
-
In the View column, click E-commerce Settings.
-
Click the Enable E-commerce and Enable Enhanced Ecommerce Reporting toggles so that they are On.
-
Add the below Funnel Steps for each part of the checkout process.
Once complete, it should look like the below image.
-
Click the Save button.
-
Lastly, go to the Admin menu, and select Tracking Info then Tracking Code. Here you will find your Google analytics tracking code, which will look something like UA-xxxxxxxxx-1. Copy this as you'll need it in step 8 of the next section.
-
Download this json file and save to your computer. You will need to upload it to tag manager shortly.
-
Log in to Google Tag Manager and select your site.
-
Select the Admin menu and click on Import Container.
-
Click the Choose Container File and select the container_base.json file downloaded earlier.
-
Choose to import it into a new or your existing workspace, and select the Merge option.
-
Click the Confirm button to start the import.
The file has everything you need for gathering tracking information from the webstore such as clicks, views, cart and checkout events. It also has the tags required to send this data to Google Analytics.
-
Once the import is complete, click on the Analytics Tracking ID.
-
Update the Tracking ID to match the one you copied in step 7 of the previous section.
Depending on your theme you may now need to tweak a few settings for all of the tracking features to work. These can be found in the Maropost Commerce - Configuration folder in Google Tag Manager, and are outlined below.
Carousel Plugin
Banner clicks are tracked based on the class name of the banners. Most Maropost Commerce themes will use the Bootstrap carousel so you won’t need to change anything here but if you’re using a different carousel plugin you will need to specify which one. If you’re unsure, check with Maropost Commerce support.
The following carousel plugins have been pre-made in this container:
- Bootstrap 4
- Bootstrap 3
- Owl Carousel 2
- Slick
If you’re using one of the above, just change the Carousel Plugin variable to the name above exactly.
If you’re using a different carousel plugin you will need to update this variable, as well as add the corresponding slide and carousel class to the Lookup Table - Carousel Container Class and Lookup Table - Carousel Slide Class variables.
Banner URLs
Banner views are tracked based off part of the banner image URL. Almost all Maropost Commerce sites will use a URL like /assets/marketing/banner.jpg but this can vary as it’s an editable option. If you open one of the banner images on your website and you see it’s located elsewhere, you will need to update the Promotion URL variable.
Thumbnails
Add the following code on your product thumbnail template (in Maropost Commerce), on the element which has the thumbnail class.
Tip: This template will usually be theme-name/templates/thumbs/product/template.html.
id="product[@inventory_id@][@rndm@]"
Product thumbnail clicks and views are tracked using the class of the thumbnail container. In most Maropost Commerce themes this will be thumbnail but this can vary too. If your theme uses a different class for thumbnail containers you will need to update the Thumbnail Container Class variable. If unsure, please contact Maropost Commerce support.
To link analytics and tag manager to Maropost Commerce, you need to set up some custom scripts to run on your site.
-
In your Maropost Commerce control panel navigate to Settings and Tools > All Settings and Tools
-
Select Custom Scripts.
-
Click the Add New button to create a new script.
-
Enter a relevant Name for the script, such as Google Tag Manager - Enhanced Ecommerce.
-
Copy your Google Tag Manager Container ID into the Key 1 field.
-
Copy the contents of each link below into the relevant tabs of the custom script:
-
When complete, click the Save button.
Please Note: Changes to a custom script require you to authenticate your access. Click the Send Token Now button and an email will be sent to you with a security token. Copy the token and paste it into the verification field. Click the Verify Token button and your changes can be saved. The token will last two hours in case you need to change multiple scripts.
Advanced Configuration (optional)
These steps are only necessary if you wish to track particular data such as categories or upsells against each other. By default this will list the location of a product view or banner view as the page type, the list for a product view on a category page will appear as category. We recommend using a Maropost Commerce partner to implement this tracking.
To be able to specify the list for product views you will need to do two things:
-
Remove the caching function from product thumbnails. In each thumbnail template of your theme you will likely find the following at the start of the file:
[%CACHE type:'gallery' id:'[@inventory_id@]'%]
and the following at the end of the file:
[%/CACHE%]
You can safely remove these lines from each thumbnail template, but they must be removed from each thumbnail template file.
-
On each template you wish to track (category templates, product templates, and so on) add the following line just before each thumb_list function where you want to specify the list name:
[%set [@list_name@]%]LIST_NAME[%/set%]
Payment Exclusions
If a customer is using PayPal or Afterpay to checkout on your website, the analytics may show them as being referred from those places. This can easily be countered by adding the following URLs to the referral exclusion list in Google Analytics:
- paypal.com
- portal.afterpay.com
You have now set up Google Analytics and Tag Manager with enhanced eCommerce tracking for your Maropost Commerce website. If you are using the default or another Google Analytics script in Maropost Commerce, it now needs to be deactivated.