Enabling the GTM in Aurora

Before adding any other code to Aurora's Front-end Templates, you need to fetch the GTM include script from your GTM account and add this to a template in the Aurora Front-end, which can then be included in all pages.

Find this code in the Admin > Install GTM section of the GTM container you created in GTM Container or simply replace GTM-XXXXXX with the appropriate container ID in the "_includes/tracking/google-tag-manager/gtm.tpl.html" Example Aurora Demo Template.

🚧

The "_includes/tracking/google-tag-manager/gtm.tpl.html" file is not updated or maintained in Aurora as a matter of course and so it is highly recommended that the most recent code is collected from your GTM account to ensure it is up to date and placed in this template instead of it's provided content.

Once you have done this, you can simply include the GTM footer template in your own footer template as follows and all GTM features currently supported by Aurora will become active on the site.

🚧

This only means that Aurora will be sending the data to the GTM and not necessarily that it will use said data.

To complete the integration and get your data passed on to Google Analytics (or any other tracking service) you must also create the GTM Tags as described later in the Adding Tags to the GTM section, which is covered later in the process described below.

"_includes/footer.tpl.html"

{include file="_includes/tracking/google-tag-manager/footer.tpl.html"}

❗️

The GTM include script in included by default in the GTM footer template, but it must be the last thing to be included on all pages. Any GTM tags found after the GTM include script will not be sent to the GTM.

Aurora Tracking Codes

The Aurora Demo site is built with a complete implementation of the GTM tags. This example code can be found in the "_includes/tracking/google-tag-manager/" directory of the Example Aurora Demo Templates and can be included as described in this section to provide all 'default' behaviour.

By default Aurora will track all of the following:

• Product Impressions on the Product Listing/Category and Search pages.
• Product 'clicks' (requires some configuration as described in this document under "Tags: Product Clicks")
• Individual product page views.
• Basket page views.
• Basket product additions.
• Basket product removals.
• Checkout submissions.
• Order complete/confirmation page views
• Promotion 'clicks' (requires some configuration as described in this document under "Tags: Promotion & Banner Clicks")

Tracking Code Examples

You can find a complete and working example set of tags to include on your site in the Aurora Demo Example Templates in the "_includes/tracking/google-tag-manager/footer.tpl.html" file.

👍

Including this file in your "footer" template should enable all default tracking assuming your GTM account is setup correctly.

Product Impressions

The Product Listing/Category page is dealt with on page-view by the code provided in the example "footer.tpl.html" template above, however when the product list is updated dynamically by Ajax, perhaps when clicking a filter to view only green products, an additional event action must be triggered to ensure these new product impressions are also sent to the GTM.

To do this, simply include the "_includes/tracking/google-tag-manager/product-listing.tpl.html" file in your listing templates as shown below.

"_includes/listings-grid.tpl.html"

{include file="_includes/tracking/google-tag-manager/product-listing.tpl.html"}

👍

This include should be placed at the very end of the file and not within the 'foreach' loop in place to display all the products.

If you do not use Ajax to dynamically update your Product Listing pages when filters are clicked, then this step is not necessary.

Product Clicks

If you wish to track when products are clicked on your site, you may use the following code around your product URLs.

This is great when used on Product Listing/Category/Search pages and also can be used on any "Recently Viewed" or "Related Product" sections across your site.

<!-- EXAMPLE GENERIC PRODUCT LINK -->
<a href="/product/link/" class="ac_gtm_product_click" data-product-price="9.99" data-product-name="Product Name" data-product-category="Product Main Category" data-product-id="1000">Product List Text</a>

<!-- EXAMPLE PRODUCT LISTING PAGE CODE -->
<a href="{$product.product_filename}" class="ac_gtm_product_click productlist_magiczoom_approved" data-product-id="{$product.id}" data-product-category="{$product.product_category_name|escape:'quotes'}"  data-product-name="{$product.product_name|escape:'quotes'}" data-product-price="{$product.product_price}" rel="disable-expand:true;opacity:0;zoom-fade:true;zoom-position:inner; smoothing-speed:25;" rev="/images/ac_product_images/product_image_data/resizeandpad:400:400/{$product.image_id}.jpg"><img src="/images/ac_product_images/product_image_data/resizeandpad:189:189/{$product.image_id}.jpg" alt="{$product.product_name}" width="189" height="189" /></a>

🚧

Please note the use of the CSS Class "ac_gtm_product_click" on these links. This tells Aurora to send the clicks to the GTM.

The following properties are supported.

Promotion & Banner Clicks

If you wish to track when banners are clicked on your site, you may use the following code around your promotional URLs and Banners.

<a href="/summer_sale/" class="ac_gtm_promotional_click" data-promotional-id="100" data-promotional-name="Summer Sale" data-promotional-creative="summer_sale_home" data-promotional-position="1">
	<img src="/images/homepage/banner_summer_sale.jpg" />
</a>

<a href="/summer_sale/" class="ac_gtm_promotional_click" data-promotional-id="101" data-promotional-name="BOGOF" data-promotional-creative="bogof_small" data-promotional-position="2">
	<img src="/images/homepage/banner_bogof_small.jpg" />
</a>

<a href="/summer_sale/" class="ac_gtm_promotional_click" data-promotional-id="101" data-promotional-name="bogof" data-promotional-creative="bogof_big" data-promotional-position="3">
	<img src="/images/homepage/banner_bogof_big.jpg" />
</a>

🚧

Please note the use of the CSS Class "ac_gtm_promotional_click" on these links. This tells Aurora to send the clicks to the GTM.

The following properties are supported.

Related Example Aurora Demo Templates

_includes/tracking/google-tag-manager/