The default Zuko activity tracking code will track interactions on the entire page.
If you have other forms on the same page, or other buttons/inputs that are not part of the form you want to track, then you can change a small part of the tracking code from target:document.body, to a specific target for your form.
Zuko needs to know where your form is on the page to start tracking. The target is an ‘element selector’ for a section of the HTML that contains your form.
The default target of document.body selects all the elements on the page, top to bottom - even including the header and footer.
If the target is too wide-ranging, and Zuko is tracking interactions on the entire page, then you could have sessions that:
By making the target specific, your data will truly represent sessions on your form.
You need to find an ‘element’ which contains only your form, not any of the other buttons/inputs.
Often, the <form> element can be used as the target, other times it needs to be a surrounding element such as a <div>.
Here is a step-by-step guide:
1. Inspect your form
Right click on any of the fields in your form, click Inspect. The Elements tab will open.
2. Look for the <form> element, or scroll up to find another <div> that contains the form. Ideally an element with an id. For example: <div id="join-block">
3. If you select this element, you should be able to see your whole form highlighted - this is the area that Zuko will track.
If you still see a button/input in this area that you don’t want to track, find another element closer to the form.
4. Open the Console tab. Now you can check if this ‘element selector’ works. Using the id seen on the <div>, type document.getElementById('join-block'), and click Enter.
You will see the element has correctly been selected and is showing on the next line.
5. Now use this ‘element selector’ as the Zuko target. This example,
This activity tracking code is now specific to your form.
You can see these tips summarised in this video:
Using an id is always best as it is unique on the page. But you can use any other type of ‘element selector’. For example:
* styles ‘class’ names can be used
* if the div you want to target has no class name or id, but you can identify it another way
document.querySelector('div.container div.content section')
The risk with using a target like these examples above, is that it relies on styles and layout which might be outside of your control. You could setup a specific target, only to find the class name is changed in the future. This is why an id close to the form is the best option.