First Successful Event Guide

See your first ADT event fire in under 5 minutes

What This Guide Does

This guide walks you through firing your very first Advanced DataLayer Tracker event and verifying it’s working correctly. By the end, you’ll see real event data flowing from your WordPress site.

Time Required: 5 minutes

What You’ll Learn:

  • How to open the Debug Overlay
  • What a successful event looks like
  • How to verify events in GTM/GA4
  • Basic troubleshooting steps

Prerequisites

Before starting, ensure:

  • ADT plugin is installed and activated
  • You have WordPress admin access
  • Your site is accessible (not in maintenance mode)

Optional (but helpful):

  • Google Tag Manager container published
  • GA4 property connected
  • Browser console experience (we’ll show you)

Step 1: Enable Page View Tracking

Page views are the foundation event – they fire automatically when any page loads.

Setup:

  1. Log into WordPress Admin
  2. Navigate to: Settings → Advanced DataLayer
  3. Click the Core Settings tab
  4. Find Page View Tracking
  5. Toggle it ON
  6. Click Save Changes

That’s it! Page view tracking is now active.

Step 2: Open the Debug Overlay

The Debug Overlay is your real-time event monitor. It shows events as they fire.

Method 1: Console Command (Easiest)

  1. Visit your website (frontend, not admin)
  2. Open browser console:
    • Windows/Linux: Press F12 or Ctrl+Shift+J
    • Mac: Press Cmd+Option+J
  3. In the console, type: ADT.debugOverlay.open()
  4. Press Enter

The Debug Overlay appears on your screen.

Method 2: Keyboard Shortcut

  1. Visit your website
  2. Press: Ctrl+Shift+D (Windows/Linux) or Cmd+Shift+D (Mac)

Method 3: URL Parameter

Add ?adt_debug=true to any page URL:

https://yoursite.com/any-page/?adt_debug=true

Step 3: Verify Your First Event

You should now see the Debug Overlay on screen. Here’s what to look for:

The Debug Overlay Interface

Top Section:

  • Session ID: Unique identifier for this browsing session
  • User ID: WordPress user ID (if logged in)
  • Consent Status: Current consent state

Event Log Section:

  • Real-time list of events as they fire
  • Most recent events appear at the top
  • Each event shows: name, timestamp, key parameters

Your First Event: page_view

What to see:

Look for an event named page_view in the event log. It should show:

Event: page_view
Time: 10:34:22 AM
Parameters:
  - page_location: https://yoursite.com/your-page/
  - page_title: Your Page Title
  - page_type: post (or page, product, etc.)
  - session_id: sess_xxxxxxxxxxxxxxxx

Success criteria:

  • Event name is page_view
  • Parameters include page_location and page_title
  • Timestamp is current (just happened)
  • No error messages in the log

Congratulations! You’ve just tracked your first event.

Step 4: Trigger More Events

Let’s fire a few more events to see the system working:

Test Event: scroll_depth

Enable scroll tracking:

  1. Go back to WordPress Admin
  2. Navigate to: Settings → Advanced DataLayer → Core Settings
  3. Enable Scroll Depth Tracking
  4. Save changes
  5. Refresh your website page
  6. Scroll down to 25% of the page

What to see:

Event: scroll_depth
Time: 10:35:14 AM
Parameters:
  - scroll_percent: 25
  - time_to_scroll: 12.4
  - page_location: https://yoursite.com/your-page/

Scroll further to 50%, 75%, and 100% to fire additional scroll_depth events.

Test Event: active_time

This event fires automatically every 30 seconds when you’re actively engaging with the page.

How to trigger:

  1. Stay on the page
  2. Move your mouse, scroll, or type (any activity)
  3. Wait 30 seconds
  4. Watch the Debug Overlay

What to see:

Event: active_time
Time: 10:35:44 AM
Parameters:
  - active_time: 30
  - total_time: 45
  - engagement_rate: 66.7

This is ADT’s most valuable metric – it measures TRUE engagement, not just time with the tab open.

Test Event: click_tracking

Enable click tracking:

  1. WordPress Admin: Settings → Advanced DataLayer → Core Settings
  2. Enable Click Tracking
  3. Save changes
  4. Refresh your website page
  5. Click any link on the page

What to see:

Event: click
Time: 10:36:12 AM
Parameters:
  - link_url: https://yoursite.com/destination/
  - link_text: Click Here
  - link_classes: button primary

Step 5: Verify in Google Tag Manager (Optional)

If you’re using GTM, let’s verify events are flowing through:

Open GTM Preview Mode

  1. Log into Google Tag Manager
  2. Open your container
  3. Click Preview button (top right)
  4. Enter your website URL
  5. Click Connect

GTM Preview panel appears alongside your site.

Watch Events Fire

  1. In the GTM Preview panel, look for Summary section
  2. Refresh your page
  3. Look for: page_view event in the events list
  4. Scroll down your page
  5. Look for: scroll_depth events

What to see:

Each time an ADT event fires, it appears in the GTM Preview panel under the “Messages” tab.

Click on any event to see:

  • Event name
  • All parameters passed
  • Which GTM tags fired
  • Full dataLayer state

Step 6: Verify in Google Analytics 4 (Optional)

If you’re using GA4, let’s verify events are reaching Google Analytics:

Open GA4 DebugView

  1. Log into Google Analytics 4
  2. Navigate to: Admin (bottom left)
  3. Under Property, click DebugView
  4. Keep this window open

Test on Your Site

  1. Visit your website
  2. Events should appear in DebugView within seconds
  3. Look for: page_view, scroll_depth, active_time events

What to see:

Each event appears as a colored block in the timeline with:

  • Event name
  • Parameters
  • Timestamp
  • User identifier

Note: DebugView shows test data in real-time. Standard reports can take 24-48 hours to populate.

Step 7: Understand What You’re Seeing

Let’s break down what these events mean:

page_view Event

Purpose: Foundation event providing page context

Fires when: Every page load

Key parameters:

  • page_location: Full URL of the page
  • page_title: HTML title of the page
  • page_type: Content type (post, page, product, category, etc.)
  • page_referrer: Where the user came from

Why it matters:

  • Foundation for all other events
  • Tracks user navigation path
  • Provides context for behavior analysis

scroll_depth Event

Purpose: Measure content consumption

Fires when: User scrolls to 25%, 50%, 75%, 100%

Key parameters:

  • scroll_percent: Depth reached (25, 50, 75, 100)
  • time_to_scroll: Seconds to reach this depth
  • page_height: Total page height in pixels

Why it matters:

  • Shows if users read your content
  • Identifies engaging vs ignored content
  • Helps optimize page length

Business insight:

  • 100% scroll on long-form content = high engagement
  • Drop-off at 25% = content not resonating
  • Fast scroll to 100% = scanning, not reading

active_time Event

Purpose: Measure TRUE user engagement

Fires when: Every 30 seconds of ACTIVE engagement

Key parameters:

  • active_time: Cumulative seconds of activity
  • total_time: Total seconds on page (including idle)
  • engagement_rate: active_time / total_time × 100

Why it matters:

  • Most important metric in ADT
  • Only counts active engagement (mouse moves, scrolls, clicks, typing)
  • Excludes time with tab in background
  • Reveals actual user interest

Business insight:

  • High active_time = genuinely engaged users
  • High total_time, low active_time = tab open but not engaged
  • Use for audience segmentation and quality scoring

Example:

User A: 120s active_time, 150s total_time = 80% engagement rate (good)
User B: 30s active_time, 200s total_time = 15% engagement rate (distracted)

Common Issues and Quick Fixes

Issue: Debug Overlay Doesn’t Appear

Possible causes:

  1. JavaScript error on page
  2. ADT not loaded
  3. Console command typed incorrectly

Solutions:

Check for JavaScript errors:

  1. Open browser console (F12)
  2. Look for red error messages
  3. Resolve conflicts with other plugins

Verify ADT is loaded:

  1. Open console (F12)
  2. Type: ADT
  3. Press Enter
  4. Should return: Object {debugOverlay: Object, sessionManager: Object, ...}
  5. If “undefined” → ADT not loaded

Try alternative methods:

  • Use keyboard shortcut: Ctrl+Shift+D
  • Use URL parameter: ?adt_debug=true
  • Clear browser cache and reload

Issue: No Events Appearing in Debug Overlay

Possible causes:

  1. Events not enabled in settings
  2. Consent blocking events
  3. Page not reloaded after enabling features

Solutions:

Verify events are enabled:

  1. WordPress Admin → Settings → Advanced DataLayer
  2. Check that features are toggled ON
  3. Save changes
  4. Reload your website page

Check consent status:

  1. Look at Debug Overlay header
  2. Check Consent Status indicator
  3. If “denied” or “pending” → Grant consent via your CMP
  4. Or disable consent requirements temporarily for testing

Force reload:

  1. Clear browser cache
  2. Hard reload: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

Issue: Events Fire But Don’t Appear in GTM/GA4

Possible causes:

  1. GTM container not published
  2. GTM preview not connected
  3. GA4 DebugView not enabled
  4. Network connectivity issues

Solutions:

For GTM:

  1. Verify container is published (not just saved)
  2. Check GTM snippet is on your site (view page source, search for “GTM-“)
  3. Ensure preview mode is connected to your site
  4. Check no ad blockers are blocking GTM

For GA4:

  1. Verify Measurement ID is correct in ADT settings
  2. Check API Secret is valid (if using Measurement Protocol)
  3. Wait a few minutes – DebugView can have slight delay
  4. Verify user identifier is being passed

Issue: Some Events Fire, Others Don’t

Possible causes:

  1. Features not enabled
  2. Conditions not met for event to fire
  3. JavaScript execution order issue

Solutions:

Check feature is enabled:

  • Each event type has an on/off toggle in settings
  • Verify the specific feature is enabled

Understand firing conditions:

  • scroll_depth: Must actually scroll to 25%, 50%, etc.
  • active_time: Must wait 30 seconds with activity
  • form_start: Must click into a form field
  • video_start: Must have a video on the page and play it

Check console for errors:

  • JavaScript errors can prevent subsequent events from firing
  • Resolve any red errors in console

Next Steps

You’ve successfully fired your first events! Here’s what to do next:

Immediate Next Steps (Today)

Enable more core features:

  1. Form Tracking → See when users start and submit forms
  2. Click Tracking → Track outbound links and button clicks
  3. Session Tracking → Group events into sessions

Test different pages:

  • Visit a blog post → See page_type: post
  • Visit a product page → See page_type: product
  • Visit homepage → See page_type: home

Watch patterns emerge:

  • Which pages get the highest scroll_depth?
  • Where is active_time highest?
  • Which pages have most form_starts?

This Week

Set up your analytics platform:

Enable advanced features:

  • Video tracking (if you have videos)
  • E-commerce tracking (if using WooCommerce)
  • UTM tracking for campaign attribution

Explore the data:

  • Build your first GA4 exploration
  • Create custom GTM tags
  • Review engagement patterns

This Month

Implement optimizations:

  • Fix forms with high abandonment
  • Improve content with low scroll_depth
  • Enhance pages with low active_time

Enable premium features:

  • Session Manager for cross-page analysis
  • Content Intelligence for automatic insights
  • Field-level form tracking for detailed friction analysis

Build strategic reports:

  • Quality score segmentation
  • Multi-touch attribution
  • Content performance matrix

Understanding Success

You’ll know you’re successful when:

Day 1:

  • Debug Overlay shows events firing
  • No JavaScript errors in console
  • Events appear in GTM Preview or GA4 DebugView

Week 1:

  • Consistent data flowing to analytics platform
  • Multiple event types working (page views, scrolls, forms, etc.)
  • Clear patterns emerging in the data

Month 1:

  • First data-driven optimizations implemented
  • Measurable improvements in key metrics
  • Team using data to make decisions

Key Concepts to Remember

The dataLayer:

  • JavaScript array that holds all event data
  • ADT automatically populates it
  • GTM reads from it to send data to other platforms
  • You can inspect it: Console → type dataLayer

Two-push pattern:

  • ADT pushes each event twice to ensure GTM sees it
  • First push: marks the event
  • Second push: contains the data
  • This is normal and expected behavior

Event vs. Parameter:

  • Event: The action that happened (page_view, scroll_depth, form_start)
  • Parameter: Details about the event (page_title, scroll_percent, form_name)
  • Events can have many parameters

Session vs. Page:

  • Page: Single page view, starts and ends on one URL
  • Session: Collection of pages, starts when user arrives, ends when they leave
  • Session ID ties all page views together

Quick Reference: Essential Events

page_view

  • Fires: Every page load
  • Use: Navigation tracking, page context

active_time

  • Fires: Every 30s of activity
  • Use: TRUE engagement measurement

scroll_depth

  • Fires: 25%, 50%, 75%, 100%
  • Use: Content consumption

form_start

  • Fires: First field focus
  • Use: Form intent

form_submit

  • Fires: Successful submission
  • Use: Conversion tracking

session_engagement_summary

  • Fires: Session end
  • Use: Complete journey analysis

Full event reference: Complete Event Guide

Debug Overlay Keyboard Shortcuts

Once the overlay is open:

  • Ctrl/Cmd + D: Toggle overlay visibility
  • Ctrl/Cmd + C: Clear event log
  • Ctrl/Cmd + E: Export session data
  • Ctrl/Cmd + P: Pause/resume event logging
  • ESC: Close overlay

Resources

Getting Started:

Feature Guides:

Integration Guides:

Reference:

Congratulations!

You’ve successfully fired your first ADT event and verified it’s working. You now have the foundation for enterprise-level tracking on your WordPress site.

What you’ve accomplished:

  • Enabled and configured your first tracking features
  • Opened and used the Debug Overlay
  • Verified events are firing correctly
  • Understood what the data means
  • Troubleshot common issues

You’re ready to:

  • Enable more advanced features
  • Connect to analytics platforms
  • Start making data-driven decisions

Remember: Start simple, verify it works, then expand. ADT grows with your needs.

Version: 1.0
Last Updated: October 2025
Plugin: Advanced DataLayer Tracker

Was this article helpful?