How can I integrate Mixpanel with Webflow and add custom code for specific actions, such as tracking video plays, using custom attribute settings?
TL;DR
- Add Mixpanel tracking code to Webflow by obtaining your project's token and pasting it in Project Settings.
- Configure elements with custom attributes in Webflow's Designer to specify tracking actions.
- Embed JavaScript for event tracking and publish the site to test if events are recorded correctly in Mixpanel.
To integrate Mixpanel with Webflow and track specific actions like video plays using custom attribute settings, follow these steps.
1. Add Mixpanel to Webflow
- Sign up for a Mixpanel account if you haven't already.
- Obtain your project's token from Mixpanel by navigating to Project Settings and locating your token.
- Open your Webflow project and go to Project Settings > Custom Code.
- Paste the Mixpanel tracking code in the Head Code section, making sure to include your project’s token.
2. Set Up Custom Attributes
- Go to the Designer in Webflow.
- Select the element you want to track (e.g., a video component).
- In the right-side panel, open the Settings and add a custom attribute in the Custom Attributes section.
- Set the attribute as mixpanel-track with a value like video-play to specify the action you’re tracking.
3. Insert Custom Code for Tracking
- Still in the Designer, embed custom code near the element you want to track.
- Click on the Embed element (>) from the Add panel and place it next to your video element.
- Enter the following JavaScript snippet (adjust element identifiers and tracking names as necessary):
- Event Tracking: Use something like
document.querySelector('your-element-selector').addEventListener('your-event', function() { mixpanel.track('your-event'); });. - Replace placeholders to match your Webflow element IDs/classes and the event name used in Mixpanel.
4. Test Your Integration
- Publish your site in Webflow to apply the changes.
- Interact with the element or action you are tracking (e.g., play the video).
- Check the Mixpanel dashboard to ensure the events are being recorded as expected.
Summary
Integrating Mixpanel with Webflow involves adding Mixpanel's tracking code to your site via Webflow's custom code settings, configuring elements with custom attributes, embedding JavaScript for event tracking, and verifying the setup by testing interactions. This allows you to track specific user actions effectively.
