Topic: Google tag manager gtm4wp code placement

Author

Posts
September 24, 2015 at 9:44 am #401190
Misho
Participant
Hi,

I have decided to use the use the Google taga manager for WordPress by duracelltomi instead of placing the GTM code manually.

It requers to place this code after the opening <body> tag:

<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

I didi this by inserting the code in the child theme’s header.php:
```
<body <?php body_class(); ?>>
<?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

  <?php wl_gear(); ?>

  <?php do_action( 'x_before_site_begin' ); ?>

  <div id="top" class="site">

  <?php do_action( 'x_after_site_begin' ); ?>
```
The code works.

But when I check the source code, the tag manager wraps the entire x-customizer-css-output script. Although it looks like everything is fine, this is odd.

Could you please check it? The site is on the dev domain and will be moved in a day or two to its destination url.
September 24, 2015 at 9:45 am #401193

Misho
Participant

This reply has been marked as private.

September 24, 2015 at 1:29 pm #401407

Jade
Moderator

Hi there,

I have just checked with the Code Inspector and the code mark up looks correct as the code you have just added shows up right after the body tag and does not wrap the script area that you mentioned. Please see the screenshot for reference.

September 24, 2015 at 5:30 pm #401610

Misho
Participant

Hmm, when I look at it, (view source, not the developer tools), it starts at line 105 and ends at line 360.

</script><style id="x-customizer-css-output" type="text/css"> is in between. Both in chrome and Firefox. Strange.

September 24, 2015 at 10:44 pm #421114

John Ezra
Member

Hi there,

Thanks for updating the thread! View Source Code and Inspect Element will always be different as you aren’t viewing the same thing.

View source code shows you the original HTML source of the page.

The inspector shows you the DOM as it was interpreted by the browser. This includes javascript which cannot be seen in the HTML source. The HTML source will always be the same across all browsers, the generated DOM might differ as it may be interpreted differently across the different browsers.

What is in the inspector is what we see on the browser so if it works properly there then it will work since it is the latter of the two.

Hope this clarifies – thanks!
Author

Posts