Google Tag right after <body>

xbsmarketing · November 9, 2018, 2:59pm

I’m having trouble getting Google Tag Manager verified for X Theme website. All the support items I’m finding point towards adding some snippets to the functions.php file, but the Tag Manager code is added a little after the tag, like this:

Currently getting:

<body>
<div id = "x-root" class="x-root">
---GOOGLE TAG MANAGER---
<...>
</div>
</body>

Google’s KB is saying that the snippet should be immediately after the opening tag. Is there any way I can get my Tag Manager snippet to be:

<body>
--- GOOGLE TAG MANAGER ---
<div id = "x-root" class="x-root">
<..>
</div>
</body>

Thanks for any assistance!

mldarshana · November 9, 2018, 5:15pm

Hi There @comdoc-marketing

Thanks for writing in! First of all, make sure that you have setup a child theme correctly and activate it by following our guide here (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).

Then you will see that there are two parts, which you will need to implement accordingly.

A code for <head> of your site
Code immediately after the opening <body> tag

To implement the head part, you can add the following code into your child theme’s functions.php file and replace the following line

with the code that you have received from Google.

function my_tag_manager_code_head() { ?>

<!-- Replace this line with Google Tag Manager head code -->


<?php }

add_action( 'wp_head', 'my_tag_manager_code_head' );

Then to implement body tag part, follow the instructions below.

Create file base.php in wp-content/themes/pro-child/framework/views/header/ and replace the following line

with the body code provided by Google.

<?php

// =============================================================================
// VIEWS/HEADER/BASE.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site, includes the <head>, opens the <body>
// element as well as the .x-root <div> and .x-site <div>.
// =============================================================================

$x_root_atts = x_atts( apply_filters( 'x_root_atts', array( 'id' => 'x-root', 'class' => 'x-root' ) ) );
$x_site_atts = x_atts( apply_filters( 'x_site_atts', array( 'id' => 'x-site', 'class' => 'x-site site' ) ) );

?>

<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<!-- ADD THE TAG MANAGER CODE HERE -->
  <div <?php echo $x_root_atts; ?>>

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

<div <?php echo $x_site_atts; ?>>

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

Add your goolge tag manager code after this line

<!-- ADD THE TAG MANAGER CODE HERE -->

Hope that helps.
Thanks!

xbsmarketing · November 10, 2018, 12:33am

That worked absolutely perfectly! Thank you so very much!

ruenel · November 10, 2018, 12:57am

You’re welcome!
We’re glad @Dashana were able to help you out.

dusedward · November 11, 2018, 4:14am

sorry, where and how do we do this part:

Create file base.php in wp-content/themes/pro-child/framework/views/header/

If you could provide some more detail please

ruenel · November 11, 2018, 6:34am

Hello @dusedward,

Thanks for updating this thread. If you are trying to modifying the base.php, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/HEADER/BASE.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site, includes the <head>, opens the <body>
// element as well as the .x-root <div> and .x-site <div>.
// =============================================================================

$x_root_atts = x_atts( apply_filters( 'x_root_atts', array( 'id' => 'x-root', 'class' => 'x-root' ) ) );
$x_site_atts = x_atts( apply_filters( 'x_site_atts', array( 'id' => 'x-site', 'class' => 'x-site site' ) ) );

?>
<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>
  <?php wp_head(); ?>
</head>

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

  <div <?php echo $x_root_atts; ?>>

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

    <div <?php echo $x_site_atts; ?>>

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

3] Save the file named as base.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/pro-child/framework/views/header/

Of course you will have to create the folder path as it does not exist in the child theme yet.

Hope this helps.

xbsmarketing · November 12, 2018, 1:07pm

Actually, this edit has made my menu (UberMenu) and Slider Revolution disappear on the home page. Any ideas? I have reverted back to original state.

xbsmarketing · November 12, 2018, 1:16pm

For what it’s worth:

All the replies from staff above reference the directory as being tied to the X Pro Theme, I am on the standard X Theme, but the directories and base.php file seem the same. Obviously, I simply replaced references with “pro-child” to just “x”

If I leave the base.php file within the child theme directory with no edits (adding the Google Tag Manager snippet) it still removes my menu.

christian · November 12, 2018, 1:44pm

Hey @comdoc-marketing,

The instructions are applicable to X also. Please also read the Customization Best Practices at https://theme.co/apex/forum/t/customizations-best-practices/205

I’d strongly recommend though that you download the correct child theme for X at https://theme.co/apex/child-themes in order to avoid confusion in the future and it then leads me to the second disadvantage.

The second disadvantage is you need to replace these instances in the pro-child theme.

Theme folder name from pro-child to x-child or any distinguishing name would do except for the parent name which is x in this case.
Open the child theme’s style.css and change Template: pro to Template: x
Still in style.css, change Theme Name: Pro – Child Theme to Theme Name: X – Child Theme or any name.
You also might want to change the Theme URI still in style.css
Change the screenshot.png to make clear that it’s a child theme of X and not Pro. Not critical but just to avoid confusion.

If you’re not going to do modifications to base.php, it’s best to remove it from your child theme. I am not sure what you mean by:

Adding extra markup in the file including the Tag Manager code is still a modification. Please check your Tag Manager code for syntax errors or there is no missing tags. It’s common for syntax errors to cause layout issues.

To be sure, please first remove base.php from your child theme then check if it works. If it does, copy base.php to your child theme again and this time past the Tag Manager code in http://htmlhint.com/ first to check if there are errors.

Thanks.

xbsmarketing · November 12, 2018, 2:40pm

Hi Christian,

I’m sorry, my note may have been confusing. I actually already had the X Child Theme installed prior to attempting this and have made numerous edits and additions to the functions.php file which have all worked flawlessly.

I was able to follow the original directions above and was successful in getting Google Tag Manager activated, but when I later checked my site I noticed that the menu had disappeared across the entire site.

Right now, if I take the base.php file from the following directory: /wp-content/themes/x/framework/views/header

And if I copy that base.php file to: /wp-content/themes/x-child/framework/views/header

Without editing it removes my menu.

Let me know if that makes sense or helps understand the issue at hand better.

Thanks!

thai · November 12, 2018, 4:07pm

Hi @comdoc-marketing,

Instead of copying the base.php file, please take the _header.php file from the following directory: x/framework/legacy/cranium/headers/views/global/.

Then copy that _header.php file to: x-child/framework/legacy/cranium/headers/views/global/.

Hope it helps

xbsmarketing · November 12, 2018, 3:40pm

Hi thai,

I think that did it! I assumed you meant _"Then copy that header.php file…" rather than base.php.

Just in case someone stumbles upon this thread and needs help, here is what my _header.php (located in x/framework/legacy/cranium/headers/views/global/) looked like to get the Google Tag Manager successfully verified:\

<?php

// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================

?>

<!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

<head>
  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<!-- Google Tag Manager (noscript) -->
SNIPPET FROM GOOGLE GOES HERE
<!-- End Google Tag Manager (noscript) -->
  <div id="x-root" class="x-root">

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

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

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

Thanks again for all of the help, everyone!

thai · November 12, 2018, 4:08pm

Sorry. That was a mistake.

Glad it’s working now.

xbsmarketing · November 12, 2018, 7:30pm

Thanks again, @thai!

nabeel · November 12, 2018, 7:32pm

You’re most welcome!

system · November 22, 2018, 7:32pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.