What is Visual Labeling?

Visual labeling of events is a user-friendly feature that allows website owners to mark and track significant user interactions without writing a single line of code. 

Visual labeling allows you to simply point and click on elements of your website you wish to track, such as buttons, forms, or navigation links. Once labeled, these elements become 'events' that your analytics tool monitors, giving you data on how users interact with them. This method is perfect for non-technical users because it eliminates the need for backend coding and can be done directly within the visual interface of the website.

Benefits:

No Technical Skill Required: Users don't need to understand HTML or JavaScript to set up tracking. This opens up data analytics to a broader range of users who may have valuable insights but lack coding skills.

Time Efficiency: Manually coding event tracking can be time-consuming, often requiring hours or days to implement. Visual labeling can be done in minutes, allowing for more immediate data collection and analysis.

Ease of Implementation: With visual labeling, you can select the events you want to track on your live website, making it a seamless process without the need for a staging environment or code deployments.

Adaptability: You can easily adjust which events you're tracking as your site evolves or as your focus shifts. This flexibility means that your analytics can adapt quickly to changing business strategies.

Reduced Errors: Manual coding is prone to errors, which can result in tracking bugs or inaccurate data. Visual labeling minimizes these risks by providing a more straightforward and controlled way to define events.

Real-Time Changes: Modify what you're tracking on-the-fly to respond to real-time user behavior or site updates. This responsiveness is essential in a dynamic digital landscape.

Cost-Effective: By reducing the need for technical resources, visual labeling can be a more cost-effective solution for small businesses or individuals without the budget for specialized analytics staff.

In summary, visual event labeling democratizes website analytics, enabling non-technical users to gain insights quickly, adapt to changes, and make informed decisions to improve user experience and conversion rates.

Using Squid's Visual Labeler

On the top menu bar - you must be within a configured website - click on the label icon.



This will open up the visual labeler in the side panel. If you already have labeled events, they will show here. If not, the panel will be empty.



Click on 'Open Visual Labeler'

You will see the following window which allows you to choose which part of your website you want to label events on. You can click the highlighted URL to populate the text box for you, or you can type in your own URL. Hit 'Go' when done.



The visual labeler will then open up on the URL you chose. You will see the labeler menu on the top of your page, as well as any prior labels that are active (they are highlighted with green boxes).



Move your cursor around the page and elements will highlight with a white box. In this example, I've highlighted the 'FAQs' hyperlink.



Click on the element you want to label and another window will appear allowing you to label this element.


Here are the things you can do within this dialog screen:

General

Label - Label this element with a custom name.

Bind to page - active this by clicking the on/off switch. Binding a label to page means that if this element is seen on a different page (different URL), then we will not pick of the label. In other words, only the element on this page will be labeled. In our example, I am labeling the FAQ hyperlink in my page menu bar. If I bind this to the current page (mysquid.io), any other page in which this 'FAQ' shows up - which in this case since it is in the menu bar it would be all pages - Squid will not pick up your custom label. You may use wildcards (\) if page URLs are dynamic.

Attributes

Within the attributes tab, you can define custom properties for this label. Properties can be anything and will be carried with the label. Properties are useful if you are sending this label to other event-based platforms such as Segment or Rudderstack and want to use these in rules logic downstream.

Label your element, add attributes (if applicable) and click save.



Continue to label elements as you desire.

If you will to navigate to another page, toggle the Label<->Navigate switch on the menu bar, or hold down the 'ESC' key.

When done, click 'Finish Labeling'. You can now use these new labels in flows, key events and other areas of Squid.



You will need to refresh your browser for the new labels to appear in your 'My Labels' viewer.

If you need to delete or edit a label, you can do it by clicking on the purple label icon for editing and the red trash can for deleting.

Updated on: 09/02/2024