0405123696 petra@web-data-analytics.com

 1,773 total views,  3 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.

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

Kiley Hay Baby Carriers Australia

I have been working with Petra for over a year now after changing from a much larger digital marketing provider and I could not be more pleased with the service and results my business is achieving.

With my previous providers I felt disconnected with limited communication. Petra on the other hand provides me with knowledge and information in a language I can understand that helps me make informed decisions not just about digital marketing but also my e-commerce business as a whole.

Petra has helped me navigate seasonal drops in trade creating a strategy that helped us grow and establish a healthy position in the market. It is an absolute joy to work with someone who loves what they do. I have complete confidence in recommending Petra to anyone considering e-commerce digital marketing, she is efficient, trusted and a true professional.

Kiley Hay CEO of Baby Carriers Australia Ecommerce Google Ads April 23, 2020

claudia impedovo

Our main purpose for generating these reports is about findings out information that will curb our strategy. The Audience Engagement Report provided us with new findings about our audience. We implemented new marketing elements based on those findings and they have increased sales.

Claudia Impedovo Brand Manager at Spendless Shoes Ecommerce Google Analytics, Google Tag Manager & Google Data Studio Integration April 23, 2020

leesa dawson

I am so grateful to have met you, as I think your insights are the BEST I have ever come across.

Leesa Dawson CEO, The Uniform Stylist Ecommerce Google Ads April 23, 2020

Sophie Abnett

Here at 1834 Hotels we centralise the marketing for many different hotels. It can be an enormous undertaking to monitor and track the performance of each one, especially when they are all on separate webpages.

Petra helped to resolve this difficulty by creating a central hub in Google Tag Manager and Google Analytics with Cross-domain tracking and Ecommerce as well. She created many valuable analytics dashboards and reports that draw from the centralized source. Now that we have all the analytics tracking working it has improved the accuracy of our reporting and the insights have helped develop better marketing strategies.

Petra’s skills and wealth of knowledge is fantastic. I would recommend Petra without hesitation.

Sophie Abnett Digital Marketing Project Manager at 1834 Hotels Ecommerce / Hotel Google Analytics, Google Tag Manager & Google Data Studio Integration April 23, 2020