Question

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!

Was it helpful?

Solution

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

OTHER TIPS

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 https://www.scommerce-mage.com/magento-google-tag-manager-enhanced-ecommerce-tracking.html. Worth trying.

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).

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