.svg){kind=small}
One issue that can come up in configuring Zuko is around the 'Next', 'Continue' or 'Back' buttons that many multistep forms have.
To illustrate: Forms often contain a ‘Next’ or ‘Continue’ button at the end of each step and when a visitor clicks this button, they are taken on to the next step of the journey. There may be multiple steps in the journey, each with its own continue button.
In order for Zuko to be able to to distinguish an individual element of a form, they need to have either a unique HTML name or a unique HTML ID. Sometimes, when a multi-step form is set up, the individual questions are given unique HTML names but the developers don't give names to the 'Continue' buttons (or they give them all the same name). This means that Zuko can't distinguish between the continue buttons so will group the interaction data for all the 'Continue' buttons together. i.e. it’s not possible to identify on which step of the journey that a visitor interacted with the 'Continue' button.
For example:
The above code shows the HTML that could be used to create the continue buttons at the end of each step. As you can see, there is nothing unique to each button; they each have the same name and no id attribute. Zuko uses a field’s tag name (e.g. INPUT), its type (e.g. submit) and any name or id attribute to identify the field. If multiple fields have the same combination of these pieces of information, then Zuko sees these as the same field. This means that Zuko will combine all the data for the continue buttons into one field so you can't distinguish between them in any of Zuko's reports.
This guide aims to provide help in implementing a solution where you can identify the continue button within each step of a multi-step form, so Zuko will report on each continue button separately and your analysis will not be affected.
There are two main ways you can accomplish this:
The best way to avoid the issues outlined above is to give each instance of a 'Next', 'Continue' or 'Back' button a unique HTML ID or HTML name in the website code. For example "Next1", "Next2", etc. This will immediately solve the problem as Zuko will be able to break out the data for each version of the button.
However, this is not always possible in the short term so there is another way round the complication.
If you can't change the base code, you can achieve the same result using Zuko's override function. The concept behind this solution is to identify some unique information on the page – for example the page title – and add this to the 'Continue' button on each step as an attribute override.
It’s important to find something on the page that identifies the step that the field is being rendered in. More often than not, there’s a page or section title that identifies the step. E.g. “Step 1”.
You can usually find this element by viewing the form, then inspecting the element in your browser:
Here, we can see that each step has a <h2> (heading) element, which contains the name of the current step. We can use this information when adding an attribute override to the steps continue button.
Note: Not every site will use a <h2> element to identify the step that a visitor is currently using. Use whatever unique element you find when inspecting the page or section title on your form. The unique info you find must only be shown in a single step of the form.
In order to add the attribute override, you need to write a small amount of JavaScript. This code will target each continue button, then it will look for the nearest <h2> element and use the data within that element when adding an override to the buttons.
<script>
// Here we fetch all of the continue buttons on the page
const continueButtons = document.querySelectorAll('input[name="continue"]');
// Loop through each button
continueButtons.forEach((continueButton) => {
// Find the parent <form> that the current continue button is part of
const form = continueButton.closest('form');
// Find the heading (<h2>) in the <form>
const heading = form.querySelector('h2');
// Extract the text of the heading
const headingContent = heading.innerText;
// Add an attribute override to the current continue button
continueButton.dataset.zukoHtmlName =
`${headingContent} ${continueButton.name}`;
})
</script>
Note: IE does not support the above code
'input[name="continue"]' is a selector which is used to target all of the continue buttons on the page. You will need to change this selector to fit your needs on your own site:
If your continue buttons do not have any identifying information, then you may have to try to target them by some other means.
It’s important to test whatever code you come up with, before deploying to your live site. You can copy and paste the code into your browser console, then press enter/return and it will run.
Then, you can inspect your continue buttons and you should see something like this:
The key is the presence of the zuko-html-name attribute on the element. We refer to this as an attribute override. This attribute is picked up by Zuko when it tracks interactions with the button and Zuko will use the value of this attribute, instead of the name attribute; regardless of whether the field has a name attribute already.
The code used for this solution can be added to the page using a tag manager or it can be added to the source HTML for the page.
It should be configured to load at the same time as the main Zuko tracking code. For example this could be hard coded or via a tag manager depending on how you have originally set Zuko up.
If you have any problems setting up these overrides then please contact us on support@zuko.io and we'll be happy to assist.
