0405123696 petra@web-data-analytics.com

 1,431 total views,  6 views today

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.

david clayton myomasters

Your attention to detail is beyond what I had expected. The detail of the data is incredible. The best part though was to learn the profile demographic - which is very different to whom I think I've been trying to target through social.

David Clayton Director, Myomasters Massage Health Clinic Google Ads April 23, 2020

Nadia Rossi

It has been an absolute pleasure working with Petra over the last year and a half. 1834 Hotels centralises marketing for over 20 hotels around Australia, all with different branding and websites. On an analytics level Petra’s skills have allowed us to monitor and track our marketing efforts in the digital space. Bringing Petra onboard to manage our Google Ads was one of the best marketing decisions we have made. Her thoroughness and attention to detail is incredible, her insights have helped develop better marketing strategies and demonstrate to shareholders return on investment. I would highly recommend working with Petra.

Nadia Rossi Digital Marketing at 1834 Hotels Ecommerce / Hotel Google Ads April 23, 2020

Erica Stacey Scout Digital

I recently worked with Petra to improve my understanding of Google Tag Manager.

Petra not only provided a solid overview of GTM set up and event tracking, she also provided many tips on best practice, and answered the questions that I didn't even know to ask!

Petra is patient, fun to work with, and her analytical programming mind is hell bent on finding the BEST solution to any data, analytics or tracking problem.

Erica Stacey Scout Digital Marketing Strategy Session June 21, 2017

Michelle Bridger

Petra's detailed reports and her personal assistance has been helping us to know where to concentrate our efforts and even showed us technical issues we needed to fix. Our Audience Engagement Report identified several key interests of our buying audience. We tried targeting one of those interests and it brought in two sales almost immediately! I highly recommend working with Petra and accessing her brilliance to scale your business.

Michelle Bridger Michelle Bridger, Facebook Advertising Specialist Ecommerce Google Tag Manager, Google Analytics & Google Data Studio Configuration April 23, 2020

charles marois olsa tools

Working with Petra was a great experience, communication was easy and she is very organized. She also provided detailed reports of the work she had done and the results generated. We would definitely recommend her services.

Charles Marois CEO, Olsa Tools Ecommerce Google Ads April 23, 2020