708 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.
TA DA! It works:
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.
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.