This post came about accidentally, but I hope it’ll be useful to many marketers during these pre-holiday days. Today, Dima Osiuk and I were discussing the landing page for the SERVER-SIDE GTM BASICS course and thought it would be great if the promo code could be prefilled in the form automatically whenever possible.
For example, if I now publish a post on my Telegram channel with a promo code, the user has to click the “Enter promo code” button, then manually enter the promo code and click the “Apply” button. Three actions that add friction to the purchase process. Let’s try to simplify this flow using GTM.
Here’s our plan:
- The user clicks a link we provide, and we add a GET parameter with the promo code to that link. As a result, we get a link like this: https://proanalytics.academy/course/server-side-gtm-basics/?promocode=OSIUK
- When the user opens our site, we can extract the value of the GET parameter using a URL variable:
3. Now we need to enter the promo code value into the appropriate field and click the “Apply” button — preferably without any user actions. We’ll do this using a Custom HTML tag and JavaScript.
We’ll break down the code in more detail in the How it works section below.
- Finally, we just need to add a trigger and publish the setup.
How it works
You’ve probably noticed that the real magic is handled by the Custom HTML tag and JavaScript. Let’s go over the code in detail.
This part is just a wrapper for the function:
<script>
(function () {
// some code })();
</script>The actual body of the function can be split into two parts:
- First, we declare 3 variables — more on each in the comments within the code:
var promocode_value = {{URL - Query - promocode}}; // retrieves the promo code value from the GET parameter
var promocode_input = document.querySelector('#promocode-input'); // selects the input field where the promo code should be entered
var promocode_button = document.querySelector('#popup-form > div.promocode-block > div > button'); // selects the button to click for applying the promo codeIf your site doesn’t require a click to apply the promo code, your code can be even shorter.
- In the second part, we first check that all variable values are valid, then assign the promo code to the input field and programmatically simulate a button click to apply it:
if (promocode_value && promocode_input && promocode_button) { // check that all variable values are valid
promocode_input.value = promocode_value; // set the promo code value in the input field
promocode_button.click(); // simulate a button click to apply the promo code
};You can see the result of how this works below:
This scheme works great for a landing page. If we’re talking about a full-featured site, you’ll likely need to add an intermediate step to store the promo code data in cookies or localStorage. Here’s a great article on that by Simo Ahava.
You can also use a Lookup Table variable to assign promo code values based on utm_campaign or other URL parameters.
In conclusion
Of course, it’s better to implement this with the help of a developer. But sometimes, a developer isn’t immediately available, and a solution is needed right now. That’s exactly when Google Tag Manager comes to the rescue. Don’t be afraid to experiment with this fantastic tool.
Share in the comments — what other interesting GTM use cases have you come across?
If you enjoyed this content, subscribe to my LinkedIn page.
I also run a LinkedIn newsletter with fresh analytics updates every two weeks — here’s the link to join.
Web Analyst, Marketer