Visual Tagger
Last updated
Last updated
Watch the following tutorial for Visual Tagger basics:
The Visual Tagger is the recommend way of labeling events in Freshpaint. The Visual Tagger is a point and click interface. When using the Visual Tagger, Freshpaint will place an overlay on top of your site that lets you see the event you are creating:
To label a click event with the visual tagger, just click the part of your website that you want to label the event definition for. This will highlight the element you clicked on and all similar elements on the page:
The Visual Tagger will show the total number of elements on the page that are similar to the element you clicked on:
Sometimes the initial event definition will not match all the elements you want it to. You can expand the event definition by clicking on other elements on the page you want it to match. Freshpaint will try to compute a new event definition that matches every element you've clicked on. If you ever want to reset and clear all the elements you've clicked on, just click the trash can icon.
Sometimes the event definition will match too many elements on the page. There are two different ways to narrow down the elements the event definition matches, with filters and by rejecting other elements.
The Visual Tagger allows you apply specific filters to the event definition. You can use the following filters:
href filter - This will filter based on the location a link points to. Applying an href filter will work in most cases if you are trying to narrow in on a specific link or button.
text filter - This will filter based on the text of the element you are selecting.
path filter - This will limit the event definition to only events that occur on the current page.
If there's an element that's highlighted that you don't want to match, you can click on it to reject it. Freshpaint will now try to compute a new event definition that matches the elements you've approved and does not match the elements you've rejected.
The Visual Tagger also makes it easy to label pageview events in Freshpaint. Just click the Label Pageview button in the top right. This will create a popup that lets you fill in the path and name of the pageview event you want to label.
The Visual Tagger lets you see where existing event definitions are on the page. To see where an existing event is defined, click Show Events in the top right. This will show you all the events you have labeled. When you mouse over one of the event definitions, Freshpaint will show you all the elements on the page that match that event's definition.
If you are using React Focus Lock to trap focus inside of a modal element in order to improve your site's accessibility, this will be deactivated temporarily while using the Visual Tagger. The data-no-focus-lock attribute will be added to the body only while using our tool to keep the modal from stealing focus from the Visual Tagger.
