I need to add some HTML and JavaScript straight after the <body> tag, specifically for the Google Tag Manager installation (https://developers.google.com/tag-manager/quickstart).

If I add it an expression, the script is placed inside the top-level <form> tag, which conflicts with Google Tag Manager's click event listeners. In that case, clicks are not being registered.

What is the best way to place the script straight after the <body> tag? I can see the following options:

1. Add some Jquery to the eSpace JavaScript property

$(document).ready(function() {
    $(document.body).prepend(" ");

Feels a bit hacky.

2. Use the IncludeJavaScript action "Script_CreateOrUpdate"

The JavaScript is added to the body, but it is immediately done for all eSpaces in the environment. It also doesn't move to the next environment with deployments.

3. Use the HTTPRequestHandler PostProcessingFilter action to replace <body ...> with <body><script>

In this case I'm not sure how to properly recognize the body tag and replace it such that all attributes are still there after replacing.

Any thoughts on what the best practice solution would be? Any downsides beside the ones I mentioned?



You covered pretty well all the possible ways.

Are you sure about 2. ? That is a strange behaviour.

It depends on the developer. 3 is the cleanest, but most old school web developers (pre-OS) will prefer 1.

To personal sites and other tags I'd accept going with 1, but I assume you're not using GTM for an internal site. To public sites, where you want to get visitors and really take advantage of analytics and advertising tools, I'd read carefully the Google sugestions and probably exclude 1. The thing is, search engines are getting smarter and can emulate a human when reading the site. Instead of reading html and building their version of the page, they wait for the onload action to execute before interpreting the final generated html as a page. So they will load the GTM and see your use of tags and its reasult on the final page. Google or not, do you trust any machine that much?

When that process is done it will be the same. Until then, I'd rather have my tags embedded server-side.


An update on the solution that we chose: We built on the IncludeJavaScript API. This is the only option for adding something to the top of the body tag.

Since this API is not user-friendly to work we built our own management screens, see this Forge component: https://www.outsystems.com/forge/component/1555/javascriptmanager/

Downsides to the alternatives:

1. Did not go for the jQuery option, was indeed hacky and is loaded after DOM is loaded, so did not fullfill our requirements.

3. Did not go for the HTTPRequestHandler PostPostProcessingFilter. This API only changes the head of the HTML, not the body!