The second instalment in our integrated event tracking mini-series will describe how to implement cross-domain form tracking.
A quick recap
Rather than putting a snippet of code on your site for each and every piece of information you’d like to gather, GTM allows you to setup tags based on what you’d like collected (macros) and when you’d like it collected (rules).
On this basis, the following procedure will listen out for when a form is submitted and dynamically append the GA cookie parameters to the action URL using the decorate form method. This will ensure that the parameters are available within the URL of the landing page on the new domain.
The small print
This technique will only work for forms using the post method as the get method will strip any query strings – including the GA cookie parameters – prior to processing. A quick inspection of the element will show you the method being used:
<form name="master-contact-form" id="contact-form" method="post"...>
Form submit listener
Create an event listener tag and apply to all pages to flag any form submissions across the site (if cross-domain forms are on a small subset of pages you may prefer to use a more specific rule instead). This tag will be used to trigger the necessary actions required to track from one domain to another. After naming the tag and selecting the ‘Form Submit Listener’ type there are two checkboxes: Wait for Tags and Check Validation. The former option is critical for this procedure to work as we are about to setup a chain of events which need to complete prior to the next page loading. The second tag will ensure that the tags are fired only when the form submits successfully, avoiding any false positives. Check both boxes.
Record the Element ID
A macro is required to capture the value of one of the attributes of the form that has been submitted. By capturing such a value we’re making it accessible to our rule where we’ll use it to identify the subject form. Create a new Auto-Event Variable macro using the Element ID type.
In cases where your form does not have an id attribute you could substitute it for one of the given alternates dependant on your setup:
Element
Element Classes
Element Target
Element URL
To process a rule for all forms going to a specific URL the Element URL is likely to prove the simplest.
Specify the rule
Next, state the conditions in which the tag should fire the decorate form method. We only want this to happen when a form is submitted (the event) and the form being posted matches the form in question (the subject).
Decorate Form Tag
Setup a new Google Analytics tag which fires based on the Form Submission rule. Select Decorate Form as the Track Type. This will change the form’s action property (where to send the form once completed) to include the Google Analytics cookie information within the query string.
And finally...
An amendment on the destination domain to enable the setAllowLinker method is required to allow the target site to receive this data. If using GTM on the destination site, amend your Google Analytics Page View tag by selecting Allow Linker in More Settings > Domains and Directories. If you need to amend the on-page code, examples can be found on the Google Analytics Developers’ site here.
Et voila! Well, almost…
Just a final bit of testing to do and once you’re happy create a new container version and publish.
As always, let us know below if you have any comments and please get in touch if you need some help setting this up.