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?

2

3 Answers 3

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.

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

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!

0

You can easily add Google Tag Manager in Magento 2 without third-party extensions. All you need is 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

<?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="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>
    </body>
</page>

NOTE: You must run the deploy command after adding the above files

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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