2

I add to google tag manager script code but where to add file path I don't know. Can you please tell me the file path in magento2?

3

Out of the box functionality of GTM in Magento 2 is very limited. You can do basic installation with GTM but GTM is all about data layers because without them there is very little you can do. Strongly recommend to have read through the following links -:

Full overview of data layers required to implement Enhanced Ecommerce Tracking via GTM -:

https://developers.google.com/tag-manager/enhanced-ecommerce

Read through this article which give you more in-depth details about data layers -:

Magento 2 -Google Tag Manager Enhanced E-commerce Tracking?

Implementing basic GTM functionality, create a simple module -:

Block Class -:

/**
 * Google Tag Manager block
 */
namespace Custom\GoogleTagManager\Block;

class Gtm extends \Magento\Framework\View\Element\Template
{

    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }
}

Layout xml -:

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Custom\GoogleTagManager\Block\Gtm" name="google_tag_manager" as="google_tag_manager" template="gtm.phtml"/>
        </referenceContainer>
        <referenceContainer name="head.additional">
            <block class="Custom\GoogleTagManager\Block\Gtm" name="google_tag_manager_ns" as="google_tag_manager_ns" template="gtmns.phtml"/>
        </referenceContainer>
    </body>
</page>

template files -:

gtm.phtml

<!-- Google Tag Manager Start -->
<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-QWAXXX');</script>
<!-- Google Tag Manager End-->

gtmns.phtml

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

You could also use M1 or M2 GTM extensions which will have everything you need in terms of data layer and can implement all sort of tracking (FB, GA, Dynamic Remarketing, Twitter, Pinterest and many more)

M2 GTM Pro Extension

M1 GTM Pro Extension

Hope you have all the ammunition to fight with your GTM problem. Best of luck!

2

To add Google Tag Manager code follow below code snippet

You need to add the GTM code to your active theme. The GTM code is divided into two parts: script and noscript.

You need to put the GTM snippet into these two phtml templates for head and body:

YourTheme/Magento_Theme/templates/html/gtm_head.phtml

<script>..</script> <!-- GTM code -->

YourTheme/Magento_Theme/templates/html/gtm_body.phtml

<noscript>..</noscript> <!-- GTM code -->

To load the files correspondingly you should use the default .xml file:

<!-- YourTheme/Magento_Theme/layout/default.xml -->
<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>

Then create two files gtm_head.phtml and gtm_body.phtml in Vendor/Theme/Magento_Theme/templates/html directory and add GTM code as mentioned above.

  • Hi @ Evince Development, I don't have the gtm_head.phtml file in Porto theme. – Dileep Kumar Sep 24 '18 at 6:07
  • @ Dileep Kumar are you using porto theme? – Chintan Kaneriya Sep 24 '18 at 6:15
  • You can create new files in the mentioned path – Evince Development Sep 24 '18 at 6:20
  • Hi @ Evince Development, Could you please help me? – Dileep Kumar Sep 24 '18 at 6:26
  • Hi @ Chintan Kaneriya, I am using Porto theme. – Dileep Kumar Sep 24 '18 at 6:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.