How do I add GTM to my HTML5 application? - My solution

Hi all! I'm completely new to Construct 3, but I want to share the way I've found today to add GTM container to my HTML 5 app without using 3d party addons.

1. Locate your GTM code and copy this part from there

(blurred part is your GTM ID)

You will have something like this:

(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-XXXXXXX');

2. Go to layout which loads first and add global string variable. Put the code to it's initial value, make it constant and give some meaningful name, in my case it's "gtm":

3. Add "Browser" object type to your project.

4. Add event with "On start layout" system condition.

5. Add action "Execute javascript" of "Browser" object. Input following string in "Javascript" input (replace "gtm" with the name of your variable):

		 "var head = document.getElementsByTagName(""head"")[0];
			var scriptTag = document.createElement(""script"");
			scriptTag.innerHTML = "&gtm&";
			head.appendChild(scriptTag);"

6. You should have something like this:

7. That's it, you should now have your GTM container in place (even in Preview mode).

8. But it's not working if "Use worker" option in "Advanced" section of project properties is checked.

Thank you.

You could just use the scripting feature and paste the script in to a script file.

Hi Ashley, thanks for the feedback.

Just to check if I got you right:

I just make, let's say, gtm.js script file, and in that file put the whole code into runOnStartup function?

And it will do the job?

If the script isn't anything to do with the Construct engine, you should just be able to paste it in to a script file by itself. Try it and see if it works.