Magento 2 – Add Google Tag Manager Code Inside Head and Body

google-tag-managerheadmagento2

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.

Best Answer

You can add JS files like this:

duplicate the file:

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

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

Related Solutions

Magento 2 – Adding TypeKit Code to the Head

There is no need to create extension just to add script in head. You can use following setting from admin.

UPDATE:

In Magento 2.0, the Miscellaneous Scripts feature was located under the Admin > Stores > Configuration > General > Design > HTML head And find Miscellaneous Scripts

Add Your Typekit/Custom script here in Miscellaneous Scripts textarea and Save Config.

In Magento 2.1, this feature was relocated to the Admin > Content > Design > Configuration Tab. You will then need to select the Scope for which you wish to make the changes. In the Other Settings section, select the HTML Head Tab.

Add Your Typekit/Custom script here in Scripts and Style Sheets textarea and Save Config.

Note: Don't forget to clear cache

Hope it helps you

Magento – Add Google Tag Manager to Magento 2

If you want to add Google Tag Manager without creating a module, you can add the gtm code from your active theme.

You can have two phtml templates to include the GTM snippet that needs to go to 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 -->

You can use the default.xml file to load the above files.

<!-- YourTheme/Magento_Theme/layout/default.xml -->
<referenceBlock name="head.additional">
    <block class="Magento\Framework\View\Element\Template" name="gtm.head" before="-" template="Magento_Theme::html/gtm_head.phtml" />
</referenceBlock>

<referenceContainer name="after.body.start">
    <block class="Magento\Framework\View\Element\Template" name="gtm.body" before="-" template="Magento_Theme::html/gtm_body.phtml" />
</referenceContainer>

Best Answer

Related Solutions

Magento 2 – Adding TypeKit Code to the Head

Magento – Add Google Tag Manager to Magento 2

Related Topic