2

After creating an account at Google TAG Manager (GTM), it gives 2 pieces of code to add immediatly after <head> tag and another immediatly after <body> tag. The “HTML Head” – “Miscellaneos script” or “Footer” – “Miscellaneous script” fields from Magento admin, seems to add that code in that sections but not immediatly after opening the tags.

So, is there another way to add it in both places? I find answers but all of them say different options,… some ones edit some .phtml files, some ones another files,…

I don’t like to install extensions that will need updates, etc. specially if it’s just to add a piece of code… I want the GTM just to install the Facebook Pixel, (because Facebook gives 2 options to install the Pixel in Magento: with extensions or with GTM),… so I’m trying to install GTM to avoid installing extensions… but maybe “the best way to install the Pixel Facebook” it’s a different question…

I hope it can be an updated post about How to install manually the Google Tag Manager! :) Thank you!

Improve this question
1
  • You can add in templates by creating a .phtml and including same in head section ( app/design/frontend/[your package]/[your theme]/template/page/gmtraking.phtml) file. Above solution will only add basic GTM to your site but in order to get all the benefits GTM you will need lots of datalayers for which you will need an extension. There is one which seems to provide lots of features and works well scommerce-mage.com/…. Worth trying.
    – Shivani Nayyar
    Commented Dec 10, 2018 at 10:32

2 Answers 2

Reset to default
3

Usually I would recommend an extension because it allows you to pass additional data to the tag manager like product id, cart contents and placed orders.

But if you really just need it for this Facebook pixel and the Facebook pixel does not need page or session specific data, you can add the code with a static block, without touching the code:

  1. create a static block (CMS > Static Blocks) that contains the script. You have to turn off the WYSWIWYG editor to enter JavaScript ("Hide Editor")

  2. Create a new widget instance (CMS > Widgets) and select your theme screenshot (2)

  3. Add Layout Update for page "All Pages" and reference "Page Top" (this is a container directly after the opening body tag)

screenshot (3)4. Select static block from (1) in "Widget Options": screenshot (4)

  1. Save.

  2. Clean cache.

Note that editing JavaScript in a static block does not work well. You can save it once, but when you want to edit the block, the script will be crippled by the WYSIWYG editor and you'll have to add it again from scratch. If it's an option for you to add a template file to the theme instead, you can do it like this:

  1. create a file app/design/frontend/[your package]/[your theme]/template/page/gmt.phtml that contains the HTML snippet for the Google Tag Manager

  2. create the static block as above, but with the following content

    {{block type="core/template" template="page/gmt.phtml"}}

  3. Add "core/template" to the block whitelist in System > Permissions

Improve this answer
6
  • Thank you for your detailed explanation! But google gives you 2 pieces of code, one for the head section (“as soon as possible after opening”) and another for the body section (“immediatly after opening”). So, what changes needs your solution? Also, Where can I find that “Layout updates” of your screenshot?
    – Pau
    Commented Mar 19, 2017 at 17:27
  • And about choosing the theme: I have 1 default theme, but 1 product is using another theme with different view.phtml (I only sell this subscription product, the other products are “fake products” without AddToCart button; I sell a subscription that gives access to the private content of website: that “fake products”: videos and other private content), so all website is using the default theme, but just 1 product is using another –and it would be fine to track conversions of that product, so I need also code on that page, not sure if it will be there if I just can select 1 theme). Thank you!
    – Pau
    Commented Mar 19, 2017 at 17:27
  • 1
    1. My solution is for the "immediately after opening body section" code. 2. you will see the "layout update" section in the second step of creating a CMS widget 3. Two themes: In this case you need to create two widgets, one for each theme. But they can reference the same CMS block in both.
    – Fabian Schmengler
    Commented Mar 19, 2017 at 18:02
  • Ok! All is clear now, but google gives a code that goes to <head> and another different code to <body>, but both must be added. How can I add the <head> code?
    – Pau
    Commented Mar 19, 2017 at 19:29
  • 1
    Use the "miscellaneous scripts" configuration to add code to the head element and do not worry about the exact position. Google wants their code "as soon as possible after opening" but this is only relevant if you use certain events in the tag manager, not for your case of a tracking pixel that's always displayed.
    – Fabian Schmengler
    Commented Mar 19, 2017 at 19:42
0

You can use the miscellaneous scripts in the store configuration for what you want. The only down-side to this is that the tracking script won't be loaded or executed until after your entire site is loaded.

If you want to modify your theme, you could add a core/text_list block to the page.xml layout file and then echo the block in each of the template files. Then just add the code as a core/text block from within the page.xml layout file. You could also try to create a CMS block which includes these scripts and include it as a new cms/block block. It's not a module, but it does require maintaining the theme when changing the javascript (if it changes).

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.