Hi,
There are several forums threads on here and your old support infrastructure that explain how to manually add google tag manager code either by duplicating the _header.php file or by adding it to functions.php in the x-child theme. Often these forums have conflicting information about file locations (I note you have updated your file path infrastructure) and (based on the responses) varying degrees of success. So after much troubleshooting I would like to clear it up here for myself and any future visitor running into trouble with manual implementation of Google Tag Manager. Though if I am wrong/have missed something critical could someone from X-Theme support please create the necessary amendments. I hope this is helpful.
CONTENTS:
1. Install via functions.php method
--------------------------------------------- OR------------------------------------------------------------
Install via _header.php Method
1. File Path for _header.php in theme
2. How to copy _header.php correctly
3. Install via x-child _header.php method
[NOTE: This does not need to be done for functions.php method]
[NOTE: If the _header.php folder structure changes in the X Theme I assume you would need to update the path you create]
[NOTE: If any changes are made to the X-Theme _Header.php in an upgrade they would not reflect on your child _header.php file you created, and you would need to do this process again with the updated X-Theme file]
[NOTE: For what it is worth I chose this method because it was the only way I could get GTM to stop flagging as non standard implementation in Google Tag Assistant]
END CONTENTS
BODY
INSTALL VIA FUNCTIONS.PHP METHOD
The advice on x-theme support is to simply place some GTM code (both the <head> and <body> install code) in your functions.php folder (in your child theme). Steps are as follows:
FIRST: Install the <head> code:
-
Navigate to the following folder \wp-content\themes\x-child
-
Download a copy of functions.php as a backup to revert to if anything goes wrong
-
edit functions.php (not your backup file keep that exactly as the original)
-
Place the following code in the bottom of the functions.php file (I have included before and after screengrabs to make it clear for everyone):
Code to copy
// Begin Google Tag Manager Code
// =============================================================================
function my_custom_google_tag_manager_code(){
?>
<!-- Replace this line with your Google Tag Manager <head> install Code -->
<?php
}
add_action( ‘wp_head’, ‘my_custom_google_tag_manager_code’, 10 );
// End Google Tag Manager Code
NOTE: It is my understanding that the number before the last bracket in the code above alters how high up in the header section your GTM container exists. i.e. The lower the number, the higher in the header you GTM Container is.
Screenshot 1: unchanged functions.php
Screenshot 2: altered functions.php (NOTE: I have added to the table of contents to keep order)
- Paste your GTM <head> code provided by google in the replace this line… section
SECOND: Install the <body> code
- Add this code below the code you just placed in the functions.php file on your child theme. (I have included a screengrab again)
Code to copy
// Add Google Tag Manager Code in Body
// =============================================================================
function my_custom_tag_manager_body(){
?>
<!-- Replace this line with your <body> code provided by google -->
<?php
}
add_action( ‘x_before_site_begin’, ‘my_custom_tag_manager_body’ );
Screenshot 3: functions.php including <body> code:
-
Paste your GTM <body> code provided by google in the replace this line… section
-
Save, exit, and test your container using google tag assistant (there are tutorials online if you don’t know how to do that - make sure you have published you gtm container though - it is also advisable to have a universal analytics tag in the published container)
INSTALL VIA _HEADER>PHP METHOD
PART 1: Current File Path For _header.php in X Theme
Due to a restructure of the X files (haha) The file path for this file in various forums is now outdated. Currently (subject to potential future changes of folder structure) the file path where you will find the _header.php file is as follows:
\x\framework\legacy\cranium\headers\views\global
PART 2: How To Copy _header.php Correctly
-
Navigate in your file manager or via FTP to:
\x\framework\legacy\cranium\headers\views\global -
Copy or download _header.php
-
Paste or upload _header.php into your x-child theme
NOTE: You MUST mirror the file path that you copied _header.php from; this is explained below -
Navigate to \wp-content\themes\x-child\framework\ then create the following folders legacy\cranium\headers\views\global
The folder structure you created will now be
\wp-content\themes\x-child\framework\legacy\cranium\headers\views\global
- upload/paste the _header.php file into your child themes new \global folder
PART 3: Install via x-child _header.php method
-
Edit your child theme _header.php file found at:
\wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\ _header.php -
paste you <head> and <body> GTM Code in (I have included a screen grab for each placement below)
SCREENSHOT 1: Clean header file
SCREENSHOT 2: GTM <head> code added (Note: I have blacked out my Container ID)
SCREENSHOT 3: GTM <body> Code added (Note: I have blacked out my Container ID)
- Save, exit, and test your container using google tag assistant (there are tutorials online if you don’t know how to do that - make sure you have published you gtm container though - it is also advisable to have a universal analytics tag in the published container)
Please feel free to improve or advise of errors.
END