0

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.

  • Your Magento version please – PЯINCƏ Jun 13 '17 at 0:17
  • @Prince magento 2 – Kevin Jun 13 '17 at 0:34
  • and how do i add the javascript file in them – Kevin Jun 13 '17 at 0:36
0

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

  • what do i do if i want to add something in the body – Kevin Jun 13 '17 at 1:39
  • Please, look my answer. – PЯINCƏ Jun 13 '17 at 12:46
4

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

1

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?

0

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

0
  • 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

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.