Tagging Events in the Visual Editor

Page view events are helpful, but the real value of autotrack shines when we’re able to define new events that are related to our app’s UI.
https://dash.readme.com/project/mixpaneldevdocs/v2.27/docs/tagging-events-in-the-visual-editor
For example, we may wish to track when our users click our primary “Watch a Video” button in our app:

720720

In Freshpaint, head over to the Visual Editor (under Events) and launch a new tab that points at the website you deployed the snippet on:

10371037

The Visual Editor is described in-depth here, but generally speaking there are two modes Normal Mode and Label Mode

429429

In label mode each element within your web application can be selected and tagged to create a new event:

15251525

In normal mode you can navigate the web application normally - no tagging is enabled.

We’ll use label mode to implement a “watch video” event by clicking the button and defining the event’s name:

693693

Once we’ve defined our event in Freshpaint, we can head over to Schema (under events), find the event we just defined (“watch video”) and flip the switch to send the event to Mixpanel (just as we did before!):

14171417

Once this toggle is set, you should start seeing the click events register in Mixpanel’s live view:

11971197

As with before, pressing the backfill button on that new metric will send all historical data that Freshpaint has observed for that metric to Mixpanel:

866866

This ensures you can still get data into Mixpanel, even if you forgot to track events when your new feature launched!

12211221

That’s the basic gist. Now you can create new events in Mixpanel without writing code!


Did this page help you?