Rapid Prototyping with GTM: Hacks for Immediate Impact
This article will focus on all things Google Tag Manager. We’ll give a top-level overview of GTM and share some handy hacks to utilise when using the tool. Lastly, we’ll share a few demos that help solve some specific challenges within GTM. So, without further ado, let’s jump in!
This is a write-up of Ritvik Sharma’s talk that he gave at GTM4ward. Here you can find his slides.
About GTM
Google Tag Manager doesn’t need much of an introduction–it has a 91% market adoption rate. But if you’re new to the tool, let’s give a quick rundown of what GTM can do for you.
GTM is a powerful tool designed to manage and deploy code-level changes primarily on websites (there is also a version for mobile apps and server-side use).
The tool is extremely easy to use. Once upon a time, we’d need the help of IT or tech and development teams to implement any kind of advertising pixel. If they weren’t using a proper content management system they might miss certain scripts.
This process was a hassle, involving chasing teams to make sure work was being done properly. Luckily, with GTM the process is much quicker. Anyone can implement or add code snippets to their website.
Any updates you make using GTM appear on your website in almost real-time. You don’t have to wait for your changes to take effect, you can quickly see results.
Digital marketing is also much easier. You can implement, change, or capture any relevant data points you need to make informed marketing decisions. There’s no need to go through any technical or IT-related hurdles on the way.
GTM is very functional and versatile. With pixels like Google Analytics, Ads, and others you can enable your entire digital marketing stack using the tool.
Another major benefit of GTM is its version control capability. Newcomers to GTM might be afraid to apply new tags or changes. They might fear they will break something and prevent their website from functioning properly.
Version control was always to the rescue. Once you identify that something is wrong, you can revert to a previous version of your site.
That’s GTM in a nutshell. If you want a more in-depth overview you can download our free GTM developer guide. It’s full of tips and tricks to help you get to grips with GTM.
Intro to GTM hacks
Injecting JavaScript code into a custom GTM HTML tag is a form of a ‘GTM hack’. It’s an approach that’s available to anyone who uses GTM and can be utilized for front-end modifications on your website.
You can tweak designs, make CSS changes and updates, fix broken features, and more. Let’s look at a common scenario to illustrate the usefulness of this approach. Brands often run extensive campaigns to gain traffic and bring users to certain landing pages. Unfortunately, they later discovered that there is an issue with the landing page
When a feature on your website is broken, you don’t want to redirect users and spoil their experience. Using CSS modifications, though, you can hide these features.
Eventually, you can even enable a CSS experimentation-based approach to these hacks. This helps you to learn what works for your brand before going through the code development release cycle. You can save money and time, whilst clearing a path forward for your project.
Prerequisites of GTM hacks
To use GTM to its fullest, you do need some technical know-how. This includes a strong understanding of how the tool works (beyond tags, variables, and triggers). You need to know how a web page functions and what a typical page load process looks like.
It’s also important to have a strong understanding of JavaScript. The limitations of JS and how it should and shouldn’t be used. The language is the backbone of GTM and is essential for any customization or injecting front-end-related hacks.
Typical web page load process
As mentioned, to understand how these hacks work, you need to know the page load process. Below is a general overview (note: this is a simplified version of the process).
When you request a URL or page, your request is sent to a server. This is then downloaded by your browser which parses the HTML and looks for CSS and JavaScript code snippets. It then tries to execute them.
During the process in which all CSS and JS are read and executed, a document object module (DOM tree) is created. This forms the HTML elements of a page, allowing a user to see and interact with them.
To effectively hack your page-related items and elements, you need to apply GTM in a way that ensures that JS hacks are added just at the right time. This should be during the DOM creation process (typically at the moment the DOM is ready).
Additionally, there are performance considerations to bear in mind. Where is GTM based and how long will scripts take to load?
Demo and impact
Demo #1
For this demo, we’ll be looking at a web page of a dummy news website. This shows an article about the health benefits of various fruits.
Let’s imagine that a traditional publication website decides that its existing content is not enough for readers. They want to add a link to allow them to access a more detailed page.
To implement this kind of change, they need to go through an internal validation process. This would consider how and where a link should be placed. The development team will then get involved and go through a sprint cycle to put this change in place. The process could take at least a few days (if not weeks).
Luckily, with GTM, we have already been able to prepare a list of tags. As you can see below, we are injecting a JavaScript-based hyperlink into the article through a custom HTML tag.
A moment later, this change is live on our dummy website. As you can see in the below image, the ‘learn more’ link is now at the bottom of the article.
These kinds of solutions should only be used as temporary measures, such as A/B testing. By testing through GTM hacks, you can give a clearer solution for the development team. They can carry out a proper implementation cycle.
Demo #2
What if you decide that your link doesn’t look right? In this situation, you might simply convert your link into a button. We just need to publish a new tag in addition to our previously injected link.
As illustrated in the below image, we aren’t just applying buttons but also adding styles. This includes the color, radius, size, and more.
So, you can easily change the look and feel of your website (although you do first need a strong understanding of how JS works).
After publishing our change, we can see that the CTA is now present at the bottom of our page. Unfortunately, though, there is a problem. The button is hidden behind the footer of the page.
Demo #3
To fix this problem, we once again need to go back to GTM. This time, however, we’re not going to use JavaScript. Instead, we’ll use a style element.
GTM doesn’t only take JavaScript, it can also implement CSS scripts. So, instead of adding a script we’re adding some custom CSS styles as part of a style element.
We’re not doing anything fancy here–just assigning the height to 100%. Knowing CSS is a crucial part of learning JavaScript. At some point, you’ll be expected to select certain elements on your webpage. This requires you to know some level of CSS.
Once we publish the solution, our scroll issue should be resolved. As you can see in the image below, the CTA is now fully visible.
If you’re not sure which approach to use, you can always A/B test both methods. This way, you can find out which approach generates the most attention from users.
Demo #4
There is still one big issue; neither the link nor the CTA works. The solution to this problem involves implementing a full feature through GTM. This approach is a little complex–we’ll be leveraging APIs to perform certain actions.
We’ll be using a feature from GTM that extracts a key insight about our article. To do that we’ve had to combine Google Tag Manager with Google Cloud. From Google, we can even create our APIs and use BigQuery to do complicated actions. We can get a response from OpenAI, which will then summarise our webpage.
We’ll see (in the image below) that in this hack we defined a prompt. We’ve asked for a key insight in less than 15 words using all the content on our webpage.
Once this has been published the script will fetch all the content, call the API, and get the results we need based on our defined prompts.
Once we reload the page, we don’t have to wait for a CTA. The hack is configured to only show a CTA when we receive a response from the server. When we hover over our ‘show key insight’ button, we’re now presented with a summary of the page.
If we wanted to, we could alter the prompt further. For example, instead of asking for one key insight, we could ask for three. You can alter how you display and style these insights depending on your objectives.
One interesting approach would be to enrich your data layers. When we send data to Google Analytics, we can request a sentiment analysis through APIs. This provides a ‘neutral’, ‘positive’, or ‘negative’ assessment of the text on our screen.
These details can be pushed into the dataLayer, enabling us to send data to GA and other tools. Through this approach, you can extract entities and other attributes to your use case. This can vastly enrich your measurement capabilities through AI-level integrations in GTM in combination with Google Cloud.
Impact of GTM Hacks
So, what impacts did these hacks have? A similar client project saw a 185% uplift in client conversion rates. The change that we had based on our hypothesis was quite simple. We added a sticky CTA on the header of the mobile experience.
This would have taken a long time manually, but we did this quickly thanks to GTM hacks. Using A/B testing we identified a path forward, and the client saw quick results. The dev team could then be brought in to implement the changes as proper features.
With this approach, you can have a quicker iteration cycle and a smoother path to seeing impacts on your objectives.
About Ritvik Sharma
Ritvik is the Director of Analytics at ChainReaction (with over 10 years of experience). He excels at using GTM to transform data into actionable insights.
He’s an organiser of MeasureCamp Dubai and enjoys exploring CloudTech such as text summarisation models (NLP) to maximise the value that analytics provides to clients.
