Skip to content

Instantly share code, notes, and snippets.

@luizbills
Created May 18, 2017 13:07
Show Gist options
  • Save luizbills/16af5f0c469c90a83b6b887de2cf6c29 to your computer and use it in GitHub Desktop.
Save luizbills/16af5f0c469c90a83b6b887de2cf6c29 to your computer and use it in GitHub Desktop.
Google Tag Manager in Elementor Canvas
// please, replace the GTM-XXXX
add_action( 'wp_head', 'custom_add_google_tag_manager_head', 0 );
function custom_add_google_tag_manager_head () {
?>
<!-- Google Tag Manager -->
<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=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
// replace the GTM-XXXX here too
add_action( 'elementor/page_templates/canvas/before_content', 'custom_add_google_tag_manager_body' );
function custom_add_google_tag_manager_body () {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
@psteinweber
Copy link

@techie7 This goes into the functions.php of your theme/child theme. If you edit the elementor files, they might be overwritten after updating the plugin.

@qolbu
Copy link

qolbu commented Oct 16, 2018

When I add to functions.php, my website getting slow and sometime stop loading.

@embertech1
Copy link

The 2nd part that goes in the body the 'noscript' didn't work for me. I ended up using a plugin to implement google Tag Manager in the end. I used "Google Tag Manager for WordPress" by By Thomas Geiger

@cstrouse
Copy link

If the noscript part doesn't work for you, then you might not be using canvas. I had to use the following to get it to work:

add_action('elementor/page_templates/header-footer/before_content', 'myprefix_google_tag_manager_no_js');
function myprefix_google_tag_manager_no_js() {
	<!-- Insert Google Tag Manager code here -->
}

@quakeboy
Copy link

Hey @luizbills thank you for this. I can't remember how many times I have referred this for various projects.

@luizbills
Copy link
Author

Hey @luizbills thank you for this. I can't remember how many times I have referred this for various projects.

You're welcome.

@WaveContent
Copy link

Cheers Luiz - you made my day!

@luizbills
Copy link
Author

Cheers Luiz - you made my day!

it also made my day :)

@matheusdigital
Copy link

Hello Luiz, I recovered my Github account (using another platform today) just to come here and say you: Muito Obrigado cara! Salvou o meu dia! Thanks for sharing.

@luizbills
Copy link
Author

Hello Luiz, I recovered my Github account (using another platform today) just to come here and say you: Muito Obrigado cara! Salvou o meu dia! Thanks for sharing.

Valeu, colega.

@drewclifton
Copy link

Hi Luiz, on the website I'm working on, the homepage uses Elementor Canvas, but the interior pages use Full Width (I also suspect that certain landing pages will use Canvas).

Could you recommend a comprehensive method of adding GTM to all pages on an Elementor-powered website, whether they are using Canvas or Full Width templates?

@luizbills
Copy link
Author

Hi Luiz, on the website I'm working on, the homepage uses Elementor Canvas, but the interior pages use Full Width (I also suspect that certain landing pages will use Canvas).

Could you recommend a comprehensive method of adding GTM to all pages on an Elementor-powered website, whether they are using Canvas or Full Width templates?

@drewclifton unfortunately I'm not working with Elementor anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment