Google Tag Manager in Elementor Canvas

example.php

// 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
}

Hello, this is indeed great. I suspect this has to be added to elementor.php file.

However, there is nothing found in the path mentioned for the body script i.e. could not find the path "elementor/page_templates/canvas/before_content"

So, I opened the canvas.php file directly and pasted the content there...

@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.

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

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

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 -->
}

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

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

You're welcome.

Cheers Luiz - you made my day!

Cheers Luiz - you made my day!

it also made my day :)

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.

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.

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?

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.