How to find the Zuko target

‍

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.

What is a target?‍

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.

‍

Why make the target specific?

‍If the target is too wide-ranging, and Zuko is tracking interactions on the entire page, then you could have sessions that:

• include button clicks from outside of your form
• include inputs from a search box
• don’t even interact with the form you want to track

‍
By making the target specific, your data will truly represent sessions on your form.

How to change to use a specific target?‍

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,

_{<script src="https://assets.zuko.io/js/v2/client.min.js"></script>}

_{<script>Zuko.trackForm({target:INSERT_TARGET_SELECTOR_HERE,slug:'1234567890'}).trackEvent(Zuko.FORM_VIEW_EVENT);</script>}

Becomes:

_{<script src="https://assets.zuko.io/js/v2/client.min.js"></script>}

_{<script>Zuko.trackForm({target:document.getElementById('join-block'),slug:'1234567890'}).trackEvent(Zuko.FORM_VIEW_EVENT);</script>}

‍

This activity tracking code is now specific to your form.

You can see these tips summarised in this video:

‍

What if there are no specific elements with an id?

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
_{document.getElementsByClassName('lead-form lead-form-secondary')[0]}

* 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.

‍