<!-- 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 -->
<!-- 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:
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.
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 -:
Usually I would recommend an extension because it allows you to pass additional data to the tag manager like product id, cart contents and placed orders.
But if you really just need it for this Facebook pixel and the Facebook pixel does not need page or session specific data, you can add the code with a static block, without touching the code:
create a static block (CMS > Static Blocks) that contains the script. You have to turn off the WYSWIWYG editor to enter JavaScript ("Hide Editor")
Create a new widget instance (CMS > Widgets) and select your theme
Add Layout Update for page "All Pages" and reference "Page Top" (this is a container directly after the opening body tag)
4. Select static block from (1) in "Widget Options":
Save.
Clean cache.
Note that editing JavaScript in a static block does not work well. You can save it once, but when you want to edit the block, the script will be crippled by the WYSIWYG editor and you'll have to add it again from scratch. If it's an option for you to add a template file to the theme instead, you can do it like this:
create a file app/design/frontend/[your package]/[your theme]/template/page/gmt.phtml that contains the HTML snippet for the Google Tag Manager
create the static block as above, but with the following content
Best Answer
The basic GTM code can be added easily using the following three steps -:
Step 1
add the following script:
Step 2
add the following script:
Step 3
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