CODEWITHSUNDEEP
javascriptjquery
digitup
digitup

Reputation: 537

Place a script immediately after the opening <body> tag

I would like to place a Google tag manager script and according to Google Tag documentation, the script should be placed immediately after the opening tag.

Since we cannot change the source code, we have to append the script using the following code snippet. 

<script type="text/javascript">
(function () {
    var url = "path/to/js/file";
    var gtm = document.createElement('script');
    gtm.type = 'text/javascript';
    gtm.async = true;
    gtm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + url;
    var s = document.getElementsByTagName('body')[0];
    s.parentNode.insertBefore(gtm, s);
})();
</script>

It is almost the same as Google analytics script snippet. Now the script is appended right before the body tag. I am not sure if using jQuery method insertAfter is the proper way to do it or if there is a better way!

I appreciate your kind help.

Upvotes: 7

Views: 12423

Answers (7)

Ezra Siton
Ezra Siton

Reputation: 7741

This Q is not relevant anymore (DEC 2021), since GTM change the Setup and install of Tag Manager:

On the "new" setup you should:

  • Place the <script> code snippet in the <head> of your web page's HTML output, preferably as close to the opening <head> tag as possible, but below any dataLayer declarations.
  • **Additionally - Place the <noscript> code snippet immediately after the tag in your HTML output.

https://support.google.com/tagmanager/answer/6103696

About <noscript> no meaning to add <noscript> by any Javascript code (noscript works only in browsers when JavaScript is off).

Upvotes: 0

nrsharma
nrsharma

Reputation: 2562

Can you have an element in your body tag as first element, and append the script just before it. Use yourFirstElementIdfromBodyTag.before(here is your appended code goes) ..

For Example

<body>
<your first element> like <input type="hidden" id="hidA" />
//rest code goes here
</body>

Now as suggested use $('#hidA').before('the script code') . I am sure it will append the script just after <body>.

Upvotes: -1

Ruben Infante
Ruben Infante

Reputation: 3135

If you are utilizing jQuery, you may be able to use .prepend().

(function () {
    var url = "path/to/js/file";
    var gtm = document.createElement('script');
    gtm.type = 'text/javascript';
    gtm.async = true;
    gtm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + url;
    $('body').prepend(gtm);
})();

Upvotes: -1

Teemu
Teemu

Reputation: 23406

Actually your code inserts script between the head and body tags. Use this instead:

var s = document.body.firstChild;
s.parentNode.insertBefore(gtm, s);

Upvotes: 6

Cerbrus
Cerbrus

Reputation: 72867

Try this:

var script = 'The script content here'; // Add your JS as a string,
var url    = 'path/to/js/file';         // Or link to the file.
var scriptNode = document.createElement('script');       // Create a script Element
scriptnode.setAttribute('type', "text/javascript");      // Set the Element's `type` attribute.
// Either:
scriptNode.appendChild(document.createTextNode(script)); // Add the text to the script Element.
// Or:
scriptNode.setAttribute('src', url);                     // Link to the script
// Place the script Element before the first child of the body.
document.body.insertBefore(scriptNode , document.body.firstChild);

So, basically, use insertBefore

Upvotes: -1

Salman Arshad
Salman Arshad

Reputation: 272146

You can use Node.insertBefore for this:

var body = document.getElementsByTagName("body")[0];
body.insertBefore(gtm, body.firstChild);

This works even if body tag has no firstChild.

Upvotes: 3

Ajain Vivek
Ajain Vivek

Reputation: 1121

I think you can try this out - appendChild

 document.getElementsByTagName("body")[0].appendChild(gtm);

Upvotes: -1

Related Questions