Continue With Facebook Button Continue With Facebook Button Pic

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:

‍

1. Give each button a unique attribute

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.

‍

2. Add an attribute override to each button

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.

‍

Identifying the distinguishing information

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.

‍

Writing the tag

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 are buttons instead of inputs, then the selector could be 'button[name="continue"]'
• If your continue buttons have an id attribute and no name attribute, then the selector could be 'button#continue'
• If your continue buttons are standard submit buttons, the the selector could be 'input[type="submit"]'
  

If your continue buttons do not have any identifying information, then you may have to try to target them by some other means.

‍

Testing

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.

‍

How and when to add the code to the page

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.

morenowroke1949.blogspot.com

Source: https://www.zuko.io/guides/distinguishing-between-continue-buttons

Share this post