Boost Your Product Analytics: Custom Event Tracking in Amplitude for Scroll Depth & Micro-Conversions

In the world of product analytics, micro-conversions—the small but critical user actions—often signal intent and forecast future behavior. These include actions like clicking a CTA, playing a video, or scrolling past a key content section. While they may not always result in direct revenue, they are powerful behavioral signals.

Amplitude, a product analytics platform known for event-based tracking, is a strong ally in mapping out the user journey, but out-of-the-box configurations often focus on macro-events. To unlock deeper insights, tracking micro-conversions and scroll depth using custom events is essential.

Why Track Micro-Conversions and Scroll Depths?

Micro-Conversions

Micro-conversions help answer:

• Are users engaging with our content or UI as intended?
• Which behaviors precede major conversions (like signups or purchases)?
• Where are users dropping off before completing a key goal?

Scroll Depths

Scroll tracking tells us:

• How far users scroll on long-form content or landing pages
• Which content is being seen versus ignored
• Where users are losing interest or becoming disengaged

Tracking these metrics can help improve UX, content placement, A/B testing, and conversion funnels.

Set Up: Amplitude Custom Event Tracking

Amplitude works by logging events as JSON objects via SDKs (JavaScript, iOS, Android, etc.). To track micro-conversions and scroll depth, you need to define custom events and send them to Amplitude via the SDK.

I'll focus on a JavaScript (web) implementation, but the logic applies across platforms.

Part 1: Tracking Micro-Conversions with Custom Events

Step 1: Define What Constitutes a Micro-Conversion

Examples:

• Clicking a CTA
• Watching 75% of a video
• Submitting a non-purchase form
• Opening a dropdown

Each micro-conversion should have:

• A unique event name
• Relevant properties (page name, timestamp, device info)

Step 2: Implement Event Tracking

Using the Amplitude JavaScript SDK:

<!-- Include Amplitude SDK -->
<script type="text/javascript">
  (function(e,t){
    var n=e.amplitude||{_q:[],_iq:{}};
    var r=t.createElement("script");
    r.type="text/javascript";
    r.async=true;
    r.src="https://cdn.amplitude.com/libs/amplitude-8.17.0-min.gz.js";
    r.onload=function(){if(e.amplitude.runQueuedFunctions){
      e.amplitude.runQueuedFunctions()}else{console.log("[Amplitude] Error loading SDK")}};
    var i=t.getElementsByTagName("script")[0];
    i.parentNode.insertBefore(r,i);
    function s(e,t){e.prototype[t]=function(){
      this._q.push([t].concat(Array.prototype.slice.call(arguments,0))); return this }};
    var o=function(){this._q=[]; return this};
    var a=["init","logEvent","setUserId","setUserProperties"];
    for(var c=0;c<a.length;c++){s(o,a[c])}
    n.getInstance=function(e){e=(!e ? "$default_instance" : e); if(!n._iq[e]){
      n._iq[e]=new o()} return n._iq[e]};
    e.amplitude=n;
  })(window,document);
</script>

<script type="text/javascript">
  amplitude.getInstance().init("YOUR_API_KEY");

  // Example: Track CTA click
  document.getElementById("subscribe-button").addEventListener("click", function() {
    amplitude.getInstance().logEvent("Subscribe Button Clicked", {
      page: window.location.pathname,
      user_role: "guest"
    });
  });
</script>        

Tips:

• Name your events clearly and consistently: CTA Clicked, Video 75% Watched, etc.
• Use event properties to differentiate where and how the event occurred.

Part 2: Tracking Scroll Depth as a Custom Event

Strategy:

We’ll track when a user scrolls past certain percentages of the page (e.g., 25%, 50%, 75%, 100%)—but we only log each milestone once.

Step 1: Scroll Depth Logic

(function() {
  const scrollPoints = [25, 50, 75, 100];
  let triggered = [];

  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = Math.floor((scrollTop / docHeight) * 100);

    scrollPoints.forEach((point) => {
      if (scrollPercent >= point && !triggered.includes(point)) {
        triggered.push(point);

        amplitude.getInstance().logEvent("Scroll Depth Reached", {
          depth: `${point}%`,
          page: window.location.pathname,
          device_type: navigator.userAgent
        });
      }
    });
  });
})();        

Notes:

• This avoids logging the same scroll depth twice.
• You can customize scroll ranges or even use section-based scroll tracking (e.g., “Scrolled to Pricing Section”).

Analyzing in Amplitude

Once events are flowing in, you can begin analysis:

1. Funnel Analysis

Build a funnel from micro-conversions to main goals:

• CTA Clicked → Form Started → Signup Complete

2. Segmentation

Compare scroll behavior across device types or user cohorts:

• Do mobile users reach 75% as often as desktop users?
• Are logged-in users more likely to scroll to the bottom?

3. Path Analysis

See if scroll depth leads to certain high-value actions.

4. Retention Based on Engagement

Use early micro-conversions (like scroll depth or CTA clicks) as behavioral triggers in retention analysis.

Advanced: Combine with User Properties and Identify Users

If you’re not yet identifying users on your site, you should.

amplitude.getInstance().setUserId("user_12345");
amplitude.getInstance().setUserProperties({
  plan: "free",
  signup_source: "linkedin"
});        

This allows for deeper cohorting and personalization within Amplitude.

Conclusion

Tracking micro-conversions and scroll depths using Amplitude custom events unlocks a layer of behavioral insights that typical conversion tracking misses. Whether it's validating content placement, refining user flows, or boosting conversion rates, these granular signals provide context that macro-level KPIs simply can’t.

Set up your tracking thoughtfully, analyze iteratively, and use the insights to drive real improvements in your product experience.

I’m passionate about empowering organizations with data-driven decision-making while respecting user privacy.

Here’s how you can connect with me or view my work:

Upwork Profile: Upwork

Freelancer Profile: Freelancer

My Blog on GTM & Website Analytics: Google Tag Manager Solution

If you or someone in your network is looking for an experienced professional in this space, I’d love to connect and chat further!