How to install Google TAG Manager (GTM) to Magento 1.9.2 without extension?
2 Answers
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.
Product Clicks (for category, up-sell, cross-sell and search results) - Wherever you are showing list of products.
Product Detail Impressions (for product detail page)
Add / Remove from Cart (for add to cart or remove from cart action)
Promotion Impressions (for list of banners / ads)
Promotion Clicks (for click of the banner / ad image)
Checkout (for checkout / checkout steps)
Purchases (for order confirmation page)
Refunds (from admin to send refund to GA in case of 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
Google has given a wonderful code snippets for each page for you to implement by yourself. Just make sure you create exact data layers as specified by Google in their following documentation -:
https://developers.google.com/tag-manager/enhanced-ecommerce
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
source -: How to pass data in Data layer in magento 2.1 - Google tag Manager / Analytics
It's always better to use the extension. By doing it, you can pass a number of useful data, like product ID to the tag manager.
However, there is a way of installing Google Tag Manager without extension. Just follow these steps:
- First, create a static block containing the script (CMS > Static Blocks).
- Deactivate WYSWIWYG editor.
- Then enter JavaScript ("Hide Editor").
- Now, you have to create a new widget instance (CMS > Widgets).
- Choose your theme.
- Add layout update for "All pages."
- Use "Page Top" as the reference.
- Choose static block from (1) in "Widget Options."
- Finally, save the changes and clear the cache.