+ All Categories
Home > Documents > Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced...

Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced...

Date post: 07-Jun-2020
Category:
Upload: others
View: 13 times
Download: 2 times
Share this document with a friend
37
Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable Compilation Mode: To check that this is disabled, go to System- >Tools->Compilation. If the compiler status is ‘Disabled’, you are ready to go. If not, simply click the ‘Disable’ button on the right hand side of the screen. 2. Upload Package: Upload the content of the module to your root folder. This will not overwrite the existing Magento folder or files, only the new contents will be added. 3. Clear Caches: This can be done from the admin console by navigating to the cache management page (System->Cache Management), selecting all caches, clicking ‘refresh’ from the drop-down menu, and submitting the change. Logout and login back in Admin. 4. Configuration settings for Google Tag Manager Tracking: Go to Admin->System->Configuration->Scommerce Configuration->Google Tag Manager Tracking->General a. Enable: Set yes to enable the module. b. License Key: Enter the License key provided by Scommerce Mage. c. Account Id: Enter your Google Tag Manager Account Id. d. Enhanced Ecommerce: Set yes to enable the enhanced ecommerce. e. Brand Attribute : Select brand attribute to send brand information to Google Analytics
Transcript
Page 1: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

Enhanced Ecommerce Tracking with Google Tag

Manager - Installation/Set-up Guide

1. Disable Compilation Mode: To check that this is disabled, go to System-

>Tools->Compilation. If the compiler status is ‘Disabled’, you are ready to go. If not, simply click the ‘Disable’ button on the right hand side of the screen.

2. Upload Package: Upload the content of the module to your root folder. This will

not overwrite the existing Magento folder or files, only the new contents will be added.

3. Clear Caches: This can be done from the admin console by navigating to the

cache management page (System->Cache Management), selecting all caches, clicking ‘refresh’ from the drop-down menu, and submitting the change. Logout and login back in Admin.

4. Configuration settings for Google Tag Manager Tracking: Go to Admin->System->Configuration->Scommerce Configuration->Google Tag Manager Tracking->General

a. Enable: Set yes to enable the module.

b. License Key: Enter the License key provided by Scommerce Mage.

c. Account Id: Enter your Google Tag Manager Account Id.

d. Enhanced Ecommerce: Set yes to enable the enhanced ecommerce.

e. Brand Attribute : Select brand attribute to send brand information to Google Analytics

Page 2: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

f. Brand text box: If you don’t have brand attribute and you want to send default brand name to Google Analytics then you can enter here.

g. Base: Set 'Yes' if you want to send base order data and 'No' to send store order data to Google. Set this to ‘Yes’ always unless you have multi-store/currency is enabled and you want to send different currency data to Google.

h. Send Phone or Admin Orders - Enable this feature only if you want to

send admin orders on order creation

i. Source - You can add your source here to pass this to Google for

admin orders

j. Medium - You can add your source here to pass this to Google for

admin orders

k. Enable dynamic remarketing tags and facebook tracking: Set yes to enable dynamic remarketing tags and facebook tracking

l. Product ID Attribute: Select attribute for product ID, this should be same attribute as you have in your Google Base Feed.

m. Enable GDPR cookie check: If you are using our GDPR extension or

any other GDPR extension and you want to block sending information

to Google then set this to "yes" based on customer preference. Please

note this is optional as far as you are not sending any PII to Google this

setting needs to be turned off

n. GDPR Cookie Key: You can add name of your GDPR cookie here for our GDPR extension the name of cookie key is cookie_accepted but if you are using other GDPR extension then please check with extension developer

5. Import JSON container file to Google Tag Manager

Admin -> Import Container -> Choose container file (check json files in the zip file of your extension)

• GTM-UniversalAnalytics.json – Update GA ID variable in the variable section of GTM

• GTM-Facebook.json – Update facebookPixel variable in the variable section of GTM

• GTM-AdwordsDynamicRemarketing.json – Update conversionId

variable in the variable section of GTM Or follow the following steps to set up the above tracking(s) manually

Page 3: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

6. Set up Google Tag Manager for Enhanced Ecommerce

• Create the following variable

• Google Analytic ID

• Create the following triggers

o Product Click

Page 4: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Add To Cart

o Remove From Cart

o Checkout for measuring steps

Page 5: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• Create the following tags

o Universal Analytics – All Pages (Event - gtm.dom)

Page 6: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

N.B – Event should be gtm.dom instead of pageview.

o Product Click

Page 7: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Add To Cart

Page 8: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Remove From Cart

Page 9: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Checkout for measuring steps

Page 10: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

Publish the tags.

2. Set up Enhanced Ecommerce in Google Analytics

Page 11: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

To turn on Enhanced E-commerce for a view, and label your checkout steps:

1. Click Admin at the top of any Analytics page. 2. Select the view for which you want to enable Enhanced E-commerce

reporting. 3. In the View column, click E-commerce Settings. 4. Under Step 1, Enable E-commerce, set the status to ON. 5. Click Next step. 6. Under Step 2, Enhanced E-commerce Settings, set the status to ON. When

you turn this option on: o You can then see the Enhanced E-commerce reports in the

Conversions section o The other, older category of E-commerce reports is no longer visible

You can turn this option off to restore the older category of E-commerce reports.

7. Optionally, enter labels for the checkout steps that you have defined in your

Magento steps configuration. Please see screenshot below for reference

1 8. Click Submit.

1

Page 12: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

7. Set up Google Tag Manager for Facebook Dynamic Remarketing

• Create the following variables

• Facebook Pixel ID

• Total (data layer variable - google_tag_params.ecomm_totalvalue)

Page 13: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• currencyCode

• Product ID (s) (data layer variable - google_tag_params.ecomm_prodid)

Page 14: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• Product Price (s) (data layer variable - google_tag_params.ecomm_pvalue)

• Checkout Steps (data layer variable - ecommerce.checkout.actionField.step)

Page 15: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• Create the following triggers

o Checkout Initiate

o Initiate Payment

Page 16: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Search Page

o Remarketing Tag Product

Page 17: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Remarketing Tag Purchase

o Add to Cart (same as Enhanced Ecommerce please check

above section)

Page 18: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• Create the following tags

o Facebook Audience Pixel – All Pages

<!-- Facebook Pixel Code --> <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','//connect.facebook.net/en_US/fbevents.js'); fbq('init', '{{facebookPixelID}}'); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none"

Page 19: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

src="https://www.facebook.com/tr?id={{facebookPixelID}}&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code -->

Page 20: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Product View (Trigger this on Remarketing Tag Product) – Custom HTML Tag

<script> fbq('track', 'ViewContent', { content_type: 'product', //either 'product' or 'product_group' content_ids: ['{{productID}}'], //array of one or more product SKUs in the page value: '{{productPrice}}', //OPTIONAL, but highly recommended currency: 'USD' //REQUIRED if you a pass value }); </script>

Page 21: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Search Page (Trigger this on Search Result Page) – Custom HTML Tag <script> fbq('track', 'Search'); </script>

Page 22: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Add To Cart (Trigger this on Add To

Cart) – Custom HTML Tag

<script> var productIDs = '{{productID}}'; var results = productIDs.split(","); fbq('track', 'AddToCart', {

Page 23: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

content_ids: results, //array of one or more product SKUs in the page`z content_type: 'product', value: '{{total}}', //OPTIONAL, but highly recommended currency: 'USD' //REQUIRED if you pass a value }); </script>

Page 24: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Initiate Checkout (Trigger this on Initiate Checkout) – Custom HTML Tag <script> fbq('track', 'InitiateCheckout'); </script>

Page 25: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Initiate Payment (Trigger this on Initiate Payment) – Custom HTML Tag

<script>

fbq('track', 'AddPaymentInfo');

</script>

Page 26: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Facebook Audience Pixel – Purchase(Trigger this on Remarketing Tag Purchase) – Custom HTML Tag <script> var productIDs = '{{productID}}'; var results = productIDs.split(","); console.log(results); fbq('track', 'Purchase', { content_type: 'product', //either 'product' or 'product_group'

Page 27: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

content_ids: results, //array of one or more product SKUs in the page value: '{{total}}', //REQUIRED currency: '{{currencyCode}}' //REQUIRED }); </script>

Page 28: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

8. Set up Google Tag Manager for Google Dynamic Remarketing

• Create the following variables

• Google Tag Params

• Conversion ID

Page 29: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

• Create the following triggers

o Remarketing Tag Home

o Remarketing Tag Category

Page 30: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Remarketing Tag Cart

o Remarketing Tag Product (same as Facebook Dynamic Remarketing please check above section)

Page 31: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Remarketing Tag Purchase (same as Facebook Dynamic

Remarketing please check above section)

• Create the following tags

o Adwords Dynamic Remarketing Home (Trigger this on Remarketing Tag Home)

Page 32: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Adwords Dynamic Remarketing Category (Trigger this on Remarketing Tag Category)

Page 33: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Adwords Dynamic Remarketing Product (Trigger this on Remarketing Tag Product)

Page 34: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

o Adwords Dynamic Remarketing Cart (Trigger this on Remarketing Tag Cart)

Page 35: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

Adwords Dynamic Remarketing Purchase (Trigger this on

Remarketing Tag Purchase)

Page 36: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

Ajax Add To Basket or Remove From Basket

Page 37: Enhanced Ecommerce Tracking with Google Tag ... - Magento › media › catalog › ... · Enhanced Ecommerce Tracking with Google Tag Manager - Installation/Set-up Guide 1. Disable

Add the following two functions in your ajax add to basket js file and call

gaAddToCart on success of Ajax add to basket and gaRemoveFromCart on

success of Ajax remove from basket function.

Ajax Add To Basket

function gaAddToCart(){jQuery.cookie.json = true;var productToBasket =

jQuery.cookie("productToBasket");var productlist =

jQuery.cookie("productlist");if (productToBasket !=

undefined){manipulationOfCart(productToBasket,'add',productlist);jQuery.remo

veCookie("productToBasket", { path: '/', domain: '.' + document.domain});}}

Ajax Remove From Basket

function gaRemoveFromCart(){jQuery.cookie.json = true;var productOutBasket

= jQuery.cookie("productOutBasket");if (productOutBasket !=

undefined){manipulationOfCart(productOutBasket, 'remove',

'');jQuery.removeCookie("productOutBasket", { path: '/', domain: '.' +

document.domain });}}

Please contact [email protected] for any queries.


Recommended