1

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.

Improve this question
3
  • Your Magento version please
    – PЯINCƎ
    Commented Jun 13, 2017 at 0:17
  • @Prince magento 2
    – Kevin
    Commented Jun 13, 2017 at 0:34
  • and how do i add the javascript file in them
    – Kevin
    Commented Jun 13, 2017 at 0:36

5 Answers 5

Reset to default
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

Improve this answer
2
  • what do i do if i want to add something in the body
    – Kevin
    Commented Jun 13, 2017 at 1:39
  • Please, look my answer.
    – PЯINCƎ
    Commented Jun 13, 2017 at 12:46
8

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

Improve this answer
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?

Improve this answer
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

Improve this answer
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

Improve this answer

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.