8

I'm creating a new SXA site and have the requirement to inject Google Tag Manager (GTM) scripts into all of our pages. Unfortunately, the content editors want to manage these scripts (and other similar ones) themselves by adding content items to the content tree.

I know how to do this and inject these scripts into the <body>/<header> or <body>/<footer>, but GTM expects one script to be added to the <head> and another to be added immediately after the opening <body> tag (which would be prior to the wrapper <div>).

I looked into doing this using a Metadata Partial Design, but I couldn't find documentation and, while experimenting, I could only figure out how to add <meta> tags... nor could I figure out how to activate the partial on my pages.

Is it possible to do this out of the box with SXA? If not, where is the best place to start with a custom solution?

Improve this question

2 Answers 2

Reset to default
0

I've had the same issue in a recent sxa project: injecting a script immediately after the body tag without any surrounding divs or spans. I didn't find a solution out of the box that suited our SEO experts, but managed to fix it with just a little customization:

I created an empty controller "TextController" inherited from the StandardController. And a new View in the "Text" folder, called it "PlainText" - looking like this:

@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@model Sitecore.XA.Foundation.Mvc.Models.RenderingModelBase

@if (Model.DataSourceItem == null)
{
    @Model.MessageIsEmpty
}
else
{
    @Model.MessageEditHere
    @Html.Sxa().Field("HtmlCode", Model.DataSourceItem, true)
}

Register this rendering in Sitecore:

  • Create a new rendering item (I called it "Plain Text (Reusable)")
  • Fill in the Controller (Text) and Action (Index)
  • For the Parameters Template, Datasource Location and Datasource Template I took the same values as in the standard "Plain HTML (Reusable)" rendering
  • If you want your rendering in the toolbox, you need to add a few steps (adding it to the Available Renderings) but I assume you don't really want that
  • Add the rendering to a Partial Layout that is used on all pages - I added it to the (shared) layout of the Metadata Partial Design - not sure if that is a good idea but it works. You can use the body-top placeholder. Create a datasource item for the GTM rendering, add place your tagging code in it.

That's it I think.. been a while so I hope I didn't forget anything..

Improve this answer
3
  • I'm exploring your idea a little bit and (for now) have added a Plain HTML rendering to my Metadata Partial Design. In Experience Editor, my script executes, but it doesn't show up outside of Experience Editor. I don't completely understand what the Metadata Partial Design is... do I have to do something to include it in my pages?
    – Ben Stichter
    Aug 10, 2017 at 17:56
  • It's a partial layout that comes with sxa, but it might not yet be included on your page layouts. Make sure that is the case. But you can actually use all ways available in sxa to get the rendering on your page - I used a partial layout as that was the easiest way to get it on all pages.
    – Gatogordo
    Aug 10, 2017 at 17:58
  • This ended up working quite well for us... I was able to get it working with just 1 new view and content chances, no actual code.
    – Ben Stichter
    Aug 17, 2017 at 14:48
0

My first thought is that you would perform the following:

  • Add a script to the theme which loads the GTM code asynchronously. By default SXA will add the scripts to the end of the body; GTM will later load Google scripts to the head.
  • Use GTM to create and load the scripts dynamically using Google's interface rather than using the media library directly.

Update

For the website my company just rolled out we have the following:

  • Theme contains script called z-company-google-tag-manager.js. This script loads in the optimized-min.js file generated by SXA. Since it's a script it appears at the end of the </body> tag.
  • When the script runs it adds a new <script> tag in the <head> which contains the file to download. This meets the need you described in your comment and the behavior is expected as well as supported by Google. Moreover, the snippet of code provided by Google adds the following to the correct place.
<head>
...
<script async="" src="//www.googletagmanager.com/gtm.js?id=ABC-123456"></script>
...
</head>
  • One point to remember is that GTM actually supports JavaScript injection.

If you want to control which scripts are being added then the below solution may work for you.

SXA Extensions

I built a way for you to add a script to the site or to a specific page as seen here. You can load the GTM script using the module directly if you like and there is even a field where you can paste raw JavaScript.

Improve this answer
3
  • 2
    GTM specifically requires being loaded in the <head and top of the <body>. It would not be sufficient to load at the end of the <body>... can you control where SXA puts the scripts in the theme? This is not something that happens often, so modifying the theme may be acceptable if we get the control we need.
    – Ben Stichter
    Aug 10, 2017 at 16:19
  • Also... I was looking at Westco while waiting for answers to pop up. From a content perspective, it seemed a good fit if it let us inject script fragments instead of just CDN references. I'll have to explore the code some more.
    – Ben Stichter
    Aug 10, 2017 at 16:24
  • As @BenStichter notes GTM wants to be loaded at the top of the page - this is because it wants to load before all your other content, etc. loading it from a script call in the footer completely defeats the purpose of loading it in the head - it's not going to load until after your script has been loaded, parsed and run, and you'll miss out on reporting caused by slow loading assets, etc.
    – Zhaph - Ben Duguid
    Aug 29, 2017 at 17:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.