How to pass data in Data layer in magento 2.1 - Google tag Manager / Analytics

Question

I've created google analytics and Google tag manager account to find out all event of product like Add to Cart, Remove Cart, Checkout, Product click, Checkout, Product impression in Google Analytics.

I've created tag and Trgger for that but its not reflecting in Google anaytics.

First i want to display data layer in front end with all products details.

Please tell me how to pass data in data layer.

So i have to put code in core file to get product id, name, price, etc. and pass variable on datapush script as mentioned on this URL.

Or Magento have default functionality for this. only paste the script on header file? to get datalayer in frontend with details

Answer 1

Here is the Google Tag Manager module I would recommend for Magento 2 -:

https://github.com/magepal/magento2-google-tag-manager

Answer 2

The basic GTM code can be added easily using the following three steps -:

Step 1

gtm_head.phtml ---> YourTheme/Magento_Theme/templates/html/gtm_head.phtml

add the following script:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Step 2

gtm_body.phtml ---> YourTheme/Magento_Theme/templates/html/gtm_body.phtml

add the following script:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Step 3

default .xml file: --->YourTheme/Magento_Theme/layout/default.xml and add this:

<referenceContainer name="head.additional">
 <block class="Magento\Framework\View\Element\Template" name="gtm.head" before="-" template="Magento_Theme::html/gtm_head.phtml" />
</referenceContainer>

<referenceContainer name="after.body.start">
 <block class="Magento\Framework\View\Element\Template" name="gtm.body" before="-" template="Magento_Theme::html/gtm_body.phtml" />
</referenceContainer>

The above will add basic script of GTM code on your Magento 2 store but GTM is all about data and data layers without them there is very little can be done using the basic script of GTM.

For example - for Google Enhanced Ecommerce, you need to create data layers for all the below actions / pages

• Product Impressions (for category, up-sell, cross-sell and search results) - Wherever you are showing list of products. https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions

• Product Clicks (for category, up-sell, cross-sell and search results) - Wherever you are showing list of products. https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks

• Product Detail Impressions (for product detail page) https://developers.google.com/tag-manager/enhanced-ecommerce#details

• Add / Remove from Cart (for add to cart or remove from cart action) https://developers.google.com/tag-manager/enhanced-ecommerce#cart

• Promotion Impressions (for list of banners / ads) https://developers.google.com/tag-manager/enhanced-ecommerce#promo-impressions

• Promotion Clicks (for click of the banner / ad image) https://developers.google.com/tag-manager/enhanced-ecommerce#promo-clicks

• Checkout (for checkout / checkout steps) https://developers.google.com/tag-manager/enhanced-ecommerce#checkout

• Purchases (for order confirmation page) https://developers.google.com/tag-manager/enhanced-ecommerce#purchases

• Refunds (from admin to send refund to GA in case of refunds) https://developers.google.com/tag-manager/enhanced-ecommerce#refunds

If you are a developer you can add the above data layers in your code using the following layout handlers -:

• default.xml

• catalog_category_view.xml

• catalog_product_view.xml

• catalogsearch_advanced_result.xml

• catalogsearch_result_index.xml

• checkout_cart_index.xml

• checkout_index_index.xml

• checkout_onepage_success.xml

If not then there are quite few extensions available for small amount to buy. Personally I would recommend the following two extension for M1 and M2

M1 Google Tag Manager with Enhanced Ecommerce

M2 Google Tag Manager with Enhanced Ecommerce

Answer 3

This issue was a real pain. But finally able to resolve this issue by using this plugin (Free Version)

This provide some additional data for Google Analytics and will resolve your problems! Enjoy :)