0405123696 petra@web-data-analytics.com

Pulling a promo code field from a form

Today one of the projects we worked on was a quick job in which we pulled what the user typed into a “promo code” field off the form and into Google Analytics using Google Tag Manager. The business was planning to use several different promo codes and wanted to tie individual promo codes with incoming traffic sources and activity on the website.

A small project like this one might be useful for you if you have a form in which users input data or select from options that you have given them and if you would like to track how users are using your form. It can be used for identifying if any particular part of the form leads to abandonment, as well as tracking the actual responses.

The interesting / tricky thing about this particular project was the fact that the form was automatically generated by a form builder which assigned a random ID to the fields on the form each time it was loaded. This meant it was impossible to track down the actual field where the promo code was being inputted by searching for a specific field ID as the ID changed every time the page was loaded.

We were able to resolve this by finding all the elements on the form that enabled input, but there were 80 of them on the form! After testing several different combinations we were able to see the promo code was always element #70 on the form, so in this case we selected it by element number in order to test that we could pull the value from it.

This isn’t an ideal way to identify an element in the long-term however, because if if fields are added or subtracted from the form in the future then the promo code tracking will attempt to track another field instead. At least it let us test in the short term; we fixed it later with a bit more javascript. I’ll tell you about that shortly.

Next up we needed to pull the inputted value from the field. In this case we were able to do this by pulling out the field element’s innerHTML value using javascript in Google Tag Manager. The trouble here though was the innerHTML for this form field was convoluted and complex with a whole lot of additional unwanted data thrown in. Using javascript we cleaned it up so that only the inputted value was left.

TA DA! It works:

Google Tag Manager tracking form

Javascript for the technically inclined

Now to fix the issue of having to identify the field by the number of elements on the form. I didn’t want to leave it like that as it would break if fields were added or subtracted from the form.

You’ll see in the image above, that the field has a label and the label says “PROMOTIONAL CODE (IF RELEVANT). This label is a sibling element on the DOM for this form. In English, that means that the label is not tied to the input field in any way other than both being part of the form. It is however, always above the input field element.

We can therefore find our input field by finding the label and then navigating though the HTML on the page to find the field directly underneath. This approach worked great, so we were able to pull out the code that identified it by the number of elements on the form.

This is what the javascript in Google Tag Manager ended up looking like:

We set it up so that the promo code gets sent to Google Analytics each time someone submits the form and it sends a blank label if a promo code is not present. This way we can easily create a Google Data Studio report that compares promo code usage with non-promo code usage, and also compares the individual promo codes as well.

Share this article!

SleepWise Clinic

Petra was instrumental in pulling all our clinic's web analytics into one easy to read, dynamic report that's accessible to me at any time, and works with our EXACT booking system.

This has allowed me to see, at a glance, what marketing initiatives are working, need tweaking, or changing altogether, saving me both time and money. I can't recommend her or her analytic services enough.

Ian Gale SleepWise Clinic Strategy Session August 1, 2018