Install GTM in pure javascript through functions.php|江阴雨辰互联

GTM documentation says to include two snippets, 1 after <head> opening tag and 1 after <body> opening tag. Initially I was adding the snippets in my child's header.php file. I wanted to drop that method and use plain JS instead, mainly because of parent theme updates.

I wrote the code below to use in functions.php, but it doesn't work and I can't figure what I'm doing wrong.

Edit : error I'm getting is Uncaught TypeError: Cannot read property 'insertBefore' of null for document.body.insertBefore(el, document.body.firstChild);

<?php
add_action( 'wp_head', 'webplus_hook_gtm' );
function webplus_hook_gtm() {
?>
<script type="text/javascript">
    var para = document.createElement("script");
    var t = document.createTextNode(
    "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXX');"
    );
    para.appendChild(t);
    document.head.insertBefore(para, document.head.firstChild);

    var el = document.createElement("noscript");
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute(
    "src",
    ".html?id=GTM-XXXX"
    );
    ifrm.setAttribute("height", "0");
    ifrm.setAttribute("width", "0");
    ifrm.setAttribute("style", "display:none;visibility:hidden");
    el.appendChild(ifrm);
    document.body.insertBefore(el, document.body.firstChild);
</script>
<?php
};

Your help would be greatly appreciated, TIA.

I wrote the code below to use in functions.php, but it doesn't work and I can't figure what I'm doing wrong.

Edit : error I'm getting is Uncaught TypeError: Cannot read property 'insertBefore' of null for document.body.insertBefore(el, document.body.firstChild);

<?php
add_action( 'wp_head', 'webplus_hook_gtm' );
function webplus_hook_gtm() {
?>
<script type="text/javascript">
    var para = document.createElement("script");
    var t = document.createTextNode(
    "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXX');"
    );
    para.appendChild(t);
    document.head.insertBefore(para, document.head.firstChild);

    var el = document.createElement("noscript");
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute(
    "src",
    "https://www.googletagmanager/ns.html?id=GTM-XXXX"
    );
    ifrm.setAttribute("height", "0");
    ifrm.setAttribute("width", "0");
    ifrm.setAttribute("style", "display:none;visibility:hidden");
    el.appendChild(ifrm);
    document.body.insertBefore(el, document.body.firstChild);
</script>
<?php
};

Your help would be greatly appreciated, TIA.

Share Improve this question edited Jul 24, 2019 at 22:10 asked Jul 24, 2019 at 18:03 JackLinkers 1031 silver badge3 bronze badges

2 "It doesn't work" isn't very helpful. Please try to include as many details as possible. What isn't working? What JS errors do you have? etc – RiddleMeThis Commented Jul 24, 2019 at 18:09
Does your theme use wp_head in header? Does it use the new wp_body_open? – Krzysiek Dróżdż Commented Jul 24, 2019 at 18:40
What kind of errors do you get? GTM error? Console? – user3135691 Commented Jul 24, 2019 at 20:35
@all, sorry for lack of information about error on initial post and thank you for pointing it out. Could it be possible because I try to add the noscript after body opening tag in a wp_head function since body comes after </head> tag ? (thanks to @KrzysiekDróżdż comment which made me look at it). @KrzysiekDróżdż yes, my theme uses wp_body_open() – JackLinkers Commented Jul 24, 2019 at 22:27

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

The problem is that your code is inside the <head> element, but the code is trying to access document.body which won't exist at the time that your script is run. If I recall correctly you're supposed to place this code immediately after the opening <body> tag. To do this from functions.php your theme needs to support the new wp_body_open() hook.

header.php:

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

functions.php

add_action( 'wp_body_open', 'webplus_hook_gtm' );

Thanks for all your contributions which helped me to understand my mistake and solve my issue, especially @Krzysiek Dróżdż for the hint and @Jacob for partial solution with the action. This is my working final code :

    <?php

    add_action( 'wp_head', 'webplus_hook_gtm' );
    function webplus_hook_gtm() {
        ?>
        <script>
            var para = document.createElement("script");
            var t = document.createTextNode(
            "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXX');"
            );
            para.appendChild(t);
            document.head.insertBefore(para, document.head.firstChild);
        </script>
        <?php
    };

    add_action( 'wp_body_open', 'webplus_hook_gtm_noscript' );
    function webplus_hook_gtm_noscript() {
        ?>
        <script>
            var el = document.createElement("noscript");
            var ifrm = document.createElement("iframe");
            ifrm.setAttribute(
            "src",
            "https://www.googletagmanager/ns.html?id=GTM-XXXX"
            );
            ifrm.setAttribute("height", "0");
            ifrm.setAttribute("width", "0");
            ifrm.setAttribute("style", "display:none;visibility:hidden");
            el.appendChild(ifrm);
            document.body.insertBefore(el, document.body.firstChild);
        </script>
        <?php
    };

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745296639a4621181.html

Install GTM in pure javascript through functions.php

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

Install GTM in pure javascript through functions.php

2 Answers 2

相关推荐