Include GTM Script immediately after <body> tag?

paulmighty · #1 08-06-2016, 12:34 AM

Having a really tough go at getting my Google Tag Manager code to appear right after the <body> tag. I have the GTM being included in custom module, which is working great, except I can't get it to appear in the correct location. Google demands that the GTM script appear immediately after the <body> tag.

I am able to insert the script successfully into the <head> tag, but when I try to reconfigure to have it be included right after the opening <body> tag, I can never seem to get to it display before the <nav id="slider"> tag. Even when my GTM tpl has @ListChild (list="layout.slidebar", weight="5"), the <nav id="slider"> always appears first. When my GTM tpl has @ListChild (list="body", weight="5"), it also does not appear immediately after the <body> tag. I even tried setWeight(100) on 'XLite\View\Slidebar' in my runBuildCacheHandler, which changed the weight in the DB from 10 to 100, but didn't change the frontend hierarchy.

Any suggestion will be greatly appreciated. I'm running out of ideas :/

Thanks!
-Paul

paulmighty · #2 08-06-2016, 09:46 AM

In addition to trying to use a few combos of @ListChild list="body" and list="layout.slidebar" with my custom .tpl I also tried an alternate approach modifying the skins/mytheme/customer/en/body.tpl template like below, where getGTMCode() is a function defined in my custom module:

Code:

<!DOCTYPE html>
<html lang="{currentLanguage.getCode()}"{foreach:getHTMLAttributes(),k,v} {k}="{v}"{end:}>
  <widget class="\XLite\View\Header" />
<body {if:getBodyClass()}class="{getBodyClass()}"{end:}>

{if:getGTMCode()}<!-- Google Tag Manager -->{getGTMCode():h}<!-- END Google Tag Manager -->{end:}

{displayCommentedData(getCommonJSData()):s}
<list name="body" />
{**
 * Please note that any custom list child of 'body' will NOT have its CSS/JS resources loaded because the resources block is being 'body' child itself. Use 'layout.main' or 'layout.footer' instead.
 *}
</body>
</html>

This produces output on the frontend that looks like this (I've simplified it for clarity), where the #slidebar nav element is still above the GTM code:

Code:

<body>
<nav id="slidebar">…</nav>
<!-- Google Tag Manager -->
<noscript>…</noscript>
<script>…</script>
<!-- END Google Tag Manager -->
<script type="text/x-cart-data">…</script>
<div id="mm-0" class="mm-page mm-slideout">…</div>
<script type="text/javascript" src="http://mysite.com/cached.js?43452345"></script>
<div id="mm-blocker" class="mm-slideout"></div>
</body>

I greatly prefer NOT having to customize body.tpl, because then my module is dependent on my custom theme. Any suggestions? Looking forward to any ideas

EDIT:
In the second code example above I noticed that when viewing page source (as opposed to looking at the markup in Dev Tools), the GTM script is being placed above the <nav id="slidebar"> element, so I assume that #slidebar is being moved by some JS at runtime. So when decorating body.tpl, I get the placement I want, but then my custom module is theme-dependent, which is not ideal. How do I achieve the same script placement in my module without making it theme-dependent?

plumstripe · #3 03-28-2017, 01:48 PM

HI Paul, Did you ever get any help with this, or work it out yourself? I'm trying to do the same thing, (though with x-cart 5.3 and even less documentation). It seems crazy that it's so hard to put GTM code in x-cart. If you have any insights please let me know. Thanks

qualiteam · #4 04-04-2017, 12:23 AM

You can use the attached custom module for injecting Google Tag Manager code's into all your X-Cart 5.3.x website pages.

anandat · #5 04-04-2017, 05:49 AM

Quote:

Originally Posted by qualiteam

You can use the attached custom module for injecting Google Tag Manager code's into all your X-Cart 5.3.x website pages.

Hi,
Does similar code available for x-cart classic also ?

qualiteam · #6 04-04-2017, 11:34 PM

As far as I know there is no ready-made module for X-Cart 4 and you will have to edit core files manually.
I can't remember if anyone shared their tweaks for X-Cart 4 in these forums (at least I can't find one at the moment).

plumstripe · #7 06-15-2017, 01:33 PM

Quote:

Originally Posted by qualiteam

You can use the attached custom module for injecting Google Tag Manager code's into all your X-Cart 5.3.x website pages.

How do I implement this custom module? Do I simply put these files in the correct locations, upload them to the website and rebuild cache to incorporate them?
Or is there some other way?
Please explain, thanks!

qualiteam · #8 06-16-2017, 02:08 AM

Please use the "Upload add-on" button on the "Modules" back-end page.

qualiteam · #9 01-23-2018, 09:53 AM

There is a free ready-made module now:
https://market.x-cart.com/addons/google-tag-manager.html