Do you have a plug-in for Google Tag Manager?

Hi there,

I know you have a plug-in for Google Analytics, but do you have one I suppose something like this:
https://wordpress.org/plugins/wp-google-tag-manager/
https://wordpress.org/plugins/duracelltomi-google-tag-manager/

Really; however, I don't specifically need a plug-in for GTM as such ... mainly what I need is a means by which to copy and paste from Javascript straight after the opening <body> tags on every page within a site ... the plug-in which would facilitate that, and the code would simply be a Google Tag Manager container code snippet (from which I can then deploy other Google Analytics tags, heatmaps and other tracking tools myself).

Love to hear your advice thank you!

Kind regards,
Mike

  • Michael

    Hello Predrag,

    Thank you for that, that would be great.

    As an alternative, are you aware of any other generic plug-in that you have which would let me copy and paste a code snippet into it, which then places that code snippet on every page within a site immediately following the opening <body> tag (the recommended positioning for GTM because the tag firings can happen asynchronously while the rest of the HTML on the page loads)?

    Many thanks,
    Mike

  • Predrag Dubajic

    Hi Mike,

    You can create a small mu-plugin in your wp-content/mu-plugins folder (create folder if you don't have it) to do this for you.

    Create new .php file in that folder, doesn't matter how it's called and then place this code inside:

    <?php
    function your_function() { ?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
              jQuery('body').prepend('ADD YOUR CODE HERE');
          });
        </script>
    <? }
    add_action( 'wp_footer', 'your_function' );

    Replace ADD YOUR CODE HERE with the code you want to use and that should be it.

    Let me know if this is working for you.

    Best regards,
    Predrag

  • Michael

    P.S. The code I want to put in the ADD YOUR CODE is:

    <!-- Google Tag Manager -->
    <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <script>(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=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->

    I tried adding this; however I think the single quotes are a problem? In Dreamweaver where I tried to create the .php file it's giving me syntax errors.

    What do you think the problem might be?

    Thank you.

    Kind regards,
    Mike

  • Adam Czajczyk

    Hey Mike,

    I hope you're well today!

    Could I check with you, under the add_action where it mentions footer, why does it say that if it's not adding the code to the footer?

    This doesn't mean that the code will actually be added to a page footer. That's just a way to tell WordPress to execute "your_function" along with all other functions that are executed at the end of page loading.

    Does 'your_function' need to change?

    You don't have to change it, however it's a good practice to use something unique as a function name. However, even the "your_function" should work just fine unless you add another piece of code that would include another "your_function" :slight_smile:

    I tried adding this; however I think the single quotes are a problem? In Dreamweaver where I tried to create the .php file it's giving me syntax errors.

    I'm not a big fan of Dreamweaver but that's just my personal opinion, so please don't take it into account :slight_smile: The best way to play with WP core or template code is to use a "clean text" editor that supports UTF-8 charset encoding out-of-the-box (this might be e.g. Notepad++ for Windows or Sublime or similar for Mac or, if you're heading for more serious development jobs, Zend Studio).

    As for the code itself. The quotes/double-quotes usually need some adjusting and the typos are hard to spot. Here's a complete code that should do the trick:

    <?php
    function your_function() { 
    
    	$my_code = "
    
    	<!-- Google Tag Manager -->
    <noscript><iframe src=\"//www.googletagmanager.com/ns.html?id=GTM-XXXXXX\"
    height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>
    <script>(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=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
    
    ";
    ?>
    
        <script type="text/javascript">
          jQuery(document).ready(function() {
              jQuery('body').prepend('<?php echo $my_code;?>');
          });
        </script>
    <? }
    add_action( 'wp_footer', 'your_function' );

    What I have done here is:

    - I've added a php variable "$my_code" and assigned a code to be used to it
    - I've made the code "php-compatible" (for "double quotes inside double quotes" you use \ to escape nested "double quote")
    - I've printed your code (previously assigned to a php variable) inside Java Script.

    Assuming I haven't made a typo, this should work :slight_smile:

    Cheers,
    Adam

  • Michael

    Hi Adam,

    Thank you very much for this, amazing!

    Do you know, are there any other characters needed to encircle the script? When I implement, the opening comment does not seem to be treated like a comment (it's not in green) and there is a closing script tag in red so not sure how to encapsulate this to make it work.

    The attachment is from the source code of frederictonhoteldirectory.info

    Many thanks,
    Mike

  • Adam Czajczyk

    Hey Mike!

    I took another look at this code and it seems like it's producing a "script inside a script" which isn't quite a way to go :slight_smile: I'm sorry I haven't noticed that before.

    That being said, here's a revised version that seems to be working as expected:

    function your_function() { 
    
    	$my_code = "
    
    	<!-- Google Tag Manager -->
    <noscript><iframe src=\"//www.googletagmanager.com/ns.html?id=GTM-XXXXXX\"
    height=\"0\" width=\"0\" style=\"display:none;visibility:hidden\"></iframe></noscript>
    <script>(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=
    '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXX');</script>
    <!-- End Google Tag Manager -->
    
    ";
    
    	echo $my_code;
    
    }
    add_action( 'wp_footer', 'your_function' );

    Let me know please if it helped!

    Cheers,
    Adam

  • Predrag Dubajic

    Hi Mike,

    I did some further testing and investigation and it looks like we wont be able to make it work this way and you will need to edit your theme header.php file to make it work.

    What you will need to do is right after <body> tag add this code:
    <?php do_action( 'right_after_body' ); ?>
    And now add this code either in functions.php of your theme or in the mu-plugin file we tried using before:

    add_action( 'right_after_body', 'my_ga_tag' );
    
    function my_ga_tag() {
        ?>
        <!-- Google Tag Manager -->
        <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX\"
                          height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
        <script>( 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 =
                    '//www.googletagmanager.com/gtm.js?id=' + i + dl;
                f.parentNode.insertBefore( j, f );
            } )( window, document, 'script', 'dataLayer', 'GTM-XXXXXX' );</script>
        <!-- End Google Tag Manager -->
        <?php
    }

    Hope this works for you.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.