Setting Up Scroll Tracking on Landing Page with Mixpanel
I want to track user scroll behavior on the landing page using Mixpanel to understand where actual users are dropping off. Could you explain how to properly set this up?
I want to track user scroll behavior on the landing page using Mixpanel to understand where actual users are dropping off. Could you explain how to properly set this up?
Hi Chansol L., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> đź‘‹
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
You can track user scroll behavior on your landing page using Mixpanel's Autocapture feature, which automatically collects scroll events. Here's how to set it up:
Using Autocapture for Scroll Tracking
Mixpanel's JavaScript SDK (version 2.60.0 and above) includes Autocapture functionality that can track scroll events automatically. Here's how to implement it: 1. First, initialize the Mixpanel SDK with Autocapture enabled: LBKSmixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: true, // enable autocapture });LBKS2. By default, this will track scroll events at 25%, 50%, 75%, and 100% scroll depth checkpoints. These are the default settings for scroll tracking: LBKSmixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: { scroll: true, scroll_depth_percent_checkpoints: [25, 50, 75, 100], scroll_capture_all: false }, });LBKS3. If you want to capture all scroll events rather than just the checkpoints, you can set scroll_capture_all to true: LBKSmixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: { scroll: true, scroll_capture_all: true }, });LBKSThe Autocapture feature will automatically track "Page Scroll" events with relevant properties that can help you understand where users are dropping off on your landing page.
Viewing Scroll Data in Mixpanel
Once implemented, you can analyze the scroll data in Mixpanel to identify drop-off points: 1. Look for the [Auto] Page Scroll events in your Mixpanel project
2. Create funnels or reports to analyze how far users are scrolling down your landing page
3. Segment users based on their scroll behavior to understand different user patternsFor more detailed information about Autocapture and its configuration options, you can refer to the Mixpanel JavaScript SDK documentation.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
give me the link to the autocapture doc
give me the link to the autocapture docs kapa.ai
Let me check the knowledge base for you again. One moment! đź“š
Here are the links to Mixpanel's Autocapture documentation: 1. Autocapture Overview - This is the main documentation page that explains what Autocapture is, its availability, the events it collects, and how to configure it.2. JavaScript SDK Autocapture Configuration - This page provides detailed information about configuring Autocapture in the JavaScript SDK, including all available options and settings.3. Quickstart Guide for Autocapture - A simplified guide to get started with Autocapture quickly.These resources should help you implement and configure Autocapture for tracking scroll behavior as we discussed earlier.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
kapa.ai i am currently using mixpanelClient instead of mixpanel in my code.
Let me check the knowledge base for you again. One moment! đź“š
Based on your mention of using mixpanelClient instead of mixpanel in your code, it sounds like you're using a custom wrapper or utility file for Mixpanel in your application, which is a common practice especially in frameworks like Next.js.This approach is perfectly valid and is often used to:
1. Centralize Mixpanel configuration
2. Add custom logic around tracking
3. Handle environment-specific settingsIf you're using Next.js, this pattern is shown in the Mixpanel documentation for Next.js integration. The documentation demonstrates creating a utility file (like mixpanelClient.js) that initializes and exports Mixpanel functionality: ```import mixpanel from 'mixpanel-browser';
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;
export const initMixpanel = () => { if (!MIXPANEL_TOKEN) { console.warn('Mixpanel token is missing! Check your .env file.'); return; }
mixpanel.init(MIXPANEL_TOKEN, { autocapture: true });
}```To enable Autocapture with your mixpanelClient approach, you would need to ensure that the Autocapture configuration is passed in the init method within your client file, similar to the example above where { autocapture: true } is included.If you need more specific guidance about implementing Autocapture with your particular mixpanelClient setup, you might want to share more details about your implementation.Next.js Integration Guide provides more context on this pattern if you're using Next.js.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
kapa.ai What’s the difference between autocapture and autotrack?
Let me check the knowledge base for you again. One moment! đź“š
Based on the knowledge sources provided, there doesn't appear to be a technical difference between "autocapture" and "autotrack" in the context of Mixpanel. The term "autocapture" is used consistently throughout Mixpanel's documentation, while "autotrack" is mentioned only once as an alternative term referring to the same concept.From the knowledge source: > "Autocapture, sometimes referred to as autotrack, is an analytics method for collecting commonly tracked user behavior data, like clicks and form submissions, automatically without needing to add custom code." What is autocapture for analytics?This indicates that both terms essentially refer to the same functionality in Mixpanel - the automatic collection of user behavior data without requiring custom code implementation for each interaction. Mixpanel officially uses "Autocapture" in their product documentation and marketing materials.Mixpanel's Autocapture automatically tracks common user interactions including: - Page views - Page scrolls - Form interactions - Element clicks - Attribution dataThis is implemented with a single snippet of code rather than manually tagging each event, making it faster to set up analytics and reducing maintenance overhead.Is there a specific aspect of Mixpanel's Autocapture functionality you'd like to know more about?
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.