Add google tag manager code inside head and body

magento.stackexchange https://magento.stackexchange.com/questions/178658

Question

I have a question regarding magento. I would like to know where the head and body are located. I want to do this because i would like to add a Google tag manager code inside it. I can somehow not seem to find where it is located.

Thanks in advance.

Was it helpful?

Solution

You can add JS files like this:

duplicate the file:

app/code/Magento/Theme/view/frontend/layout/default_head_blocks.xml

to 

app/code/*your_vendor*/*your_theme*/Magento_Theme/layout/default_head_blocks.xml

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

for more informtation:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

EDIT:

To add block in content to all pages: https://magento.stackexchange.com/a/139772/48355

OTHER TIPS

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

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

I would also note that Magento 2 Enterprise Edition has some built in support for GTM:

http://docs.magento.com/m2/ee/user_guide/marketing/google-tag-manager.html

This is also a relevant StackExchange question you might enjoy if you need to implement it yourself in CE:

Add Google Tag Manager to Magento 2?

While you can successfully add your Google Analytics script by placing it in default_head_blocks.xml, you can also just add your GA ID from Magento Admin.

Stores > Configuration > Sales > Google API

Then, from your GA admin panel you should go to E-commerce Settings and enable E-commerce and turn on Enhanced E-commerce Reporting.

*That's for Magento 2.1

  • Try this Code google_tag_param Category, Pagetype and product price wise.

    <?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * @var \Magento\Theme\Block\Html\Header\Logo $block
 */
?>
<script src="<?php echo $this->getViewFileUrl("js/jquery-1.11.3.min.js"); ?>"></script>
<script src="<?php echo $this->getViewFileUrl("js/menumaker.js"); ?>"></script>
<script src="<?php echo $this->getViewFileUrl("js/jquery.bxslider.min.js"); ?>"></script>
<link rel="stylesheet" href="<?php echo $this->getViewFileUrl("css/menumaker.css"); ?>" />
<link rel="stylesheet" href="<?php echo $this->getViewFileUrl("css/jquery.bxslider.css"); ?>" />
<?php 
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $request = $objectManager->get('Magento\Framework\App\Action\Context')->getRequest();
    $category = $objectManager->get('Magento\Framework\Registry')->registry('current_category');//get current category
    $product = $objectManager->get('Magento\Framework\Registry')->registry('current_product');//get current product



    $category_urlkey = "";
    $pagetype = "";
    $product_price = "";

    if ($request->getFullActionName() == 'cms_index_index') {
        $category_urlkey = "index";
        $pagetype = "home" ;
    }
    else if($product){
        //echo $category->getId();
        //echo $category->getName();
        $category_urlkey = $product->getSku();
        $pagetype = "product" ;
        $product_price = $product->getFinalPrice();
    }else if($category){

        $category_urlkey = $category->getUrlKey();
        $pagetype = "category" ;

    }

 ?>
   <script type="text/javascript"> 
       var google_tag_params = { 
       ecomm_prodid: <?php echo $category_urlkey; ?>, 
       ecomm_pagetype: <?php echo $pagetype; ?>, 
       ecomm_totalvalue: <?php echo $product_price; ?> 
    }; 
   </script>


<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('head-top')->toHtml();?>
<?php $storeName = $block->getThemeName() ? $block->getThemeName() : $block->getLogoAlt();?>
<span data-action="toggle-nav" class="action nav-toggle"><span><?php /* @escapeNotVerified */ echo __('Toggle Nav') ?></span></span>
<?php if ($block->isHomePage()):?>
    <strong class="logo">
<?php else: ?>
    <a class="logo" href="<?php echo $block->getUrl(''); ?>" title="<?php /* @escapeNotVerified */ echo $storeName ?>">
<?php endif ?>
        <img src="<?php /* @escapeNotVerified */ echo $block->getLogoSrc() ?>"
             alt="<?php /* @escapeNotVerified */ echo $block->getLogoAlt() ?>"
             <?php echo $block->getLogoWidth() ? 'width="' . $block->getLogoWidth() . '"' : '' ?>
             <?php echo $block->getLogoHeight() ? 'height="' . $block->getLogoHeight() . '"' : '' ?>
        />
<?php if ($block->isHomePage()):?>
    </strong>
<?php else:?>
    </a>
<?php endif?>

Please check screen short

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top