How I set up GTM (Google Tag Manager) on my tiny Glitch site

4 min readAug 1, 2019

In this blog I’m going to take you through the steps I took to try to understand GTM better by setting up a container from scratch on a new Glitch site.

Steps I took were

Set up a new site (Glitch)
Set up container (GTM)
Add GTM scripts to index.html (Glitch)
Push a button click event to the Data Layer (Glitch)
Set up a tag (GTM)
Set up a trigger of the button click event to launch the tag (GTM)
Set up a data layer variable to get the data from data layer (GTM)
Test!

1. Set up new site on glitch.com

Go to glitch.com

Click on New Project in top right hand corner

Choose hello-webpage

image of glitch.com with the new project menu open and an arrow pointing to hello-webpage

To save the project click Sign in on next page so you can access it in future

glitch website with arrow pointing to sign in button

Click “Show” and then “In a New Window” so you can get the url for the next step

glitch’s top left menu with an arrow first pointing to Show then pointing to In a New Window

2. Set up container on GTM

Go to https://tagmanager.google.com

If its your first time on Tag Manager you’ll be prompted to create an account immediately, otherwise click Create Account in top right hand corner.

Page you want to end up on looks like this.

Account Name -> any name you like

Container name -> the url of your glitch app with the https:// removed

Target platform -> Web

Click Create

You now have the container created!

3. Add GTM scripts to index.html

In GTM click on the GTM id, it should begin with GTM and be just to the left of “Workplace Changes: 0”

Follow the instructions here to copy the two sections of code into you glitch code editro.

The first section goes just below <head>

The section section goes just below <body>

Click “Submit” in GTM in the top left corner of the page.

To ensure all is working correctly go to your glitch site (Click “Show” and then “In a New Window” if you closed it) and open the developer console by right-clicking and choosing inspect element and then clicking on Console.

Type dataLayer into the console and hit enter. You can expect to see something like

dataLayer
(3) [{…}, {…}, {…}, push: ƒ]0: {gtm.start: 1564324682536, event: “gtm.js”, gtm.uniqueEventId: 0}1: {event: “gtm.dom”, gtm.uniqueEventId: 1}2: {event: “gtm.load”, gtm.uniqueEventId: 2}push: ƒ ()length: 3__proto__: Array(0)

4. Push a button click event to the Data Layer

Add the below code to your glitch site.

// index.html 
....<input id="textbox">
<button name="button1" onclick="pushButtonClickToDataLayer()">Button 1</button>
....
// script.js
....
function pushButtonClickToDataLayer() {
  console.log('pushButtonClickToDataLayer function is called')
  const inputValue = document.getElementById('textbox').value
  window.dataLayer.push({'event': 'button1-click', 'inputText': inputValue});
}
....

This will make an input box and a button appear.

When you click it you should see ‘pushButtonClickToDataLayer function is called’ in the console

When you type dataLayer in the console the last object should be an event with button1-click

5. Set up a tag

In GTM click on Tags in the left hand side and then click New and choose Custom HTML

Name it ButtonClick

Add the below code to the html box.

<script>
 console.log(‘hello from GTM, button1-click event fired so this code ran.’ + {{inputText}} + ‘ was entered in input box’)
</script>

Next click on Choose a trigger to make this tag fire

6. Set up the trigger

Choose create a new trigger (+ in top right) and choose Custom Event Type.

Here you want to add the event type you have in your dataLayer (button1-click)

7. Set up the data layer variable

Create a new variable of type “data layer variable” with name inputText