WordPress GA4 Event Tracking | Blue Frog Docs

WordPress GA4 Event Tracking

Implement custom events in WordPress for forms, WooCommerce, page builders, and user interactions

WordPress GA4 Event Tracking

Learn how to track WordPress-specific user interactions with GA4 events, including form submissions, WooCommerce actions, plugin interactions, and custom user journeys.

Understanding WordPress Event Tracking

WordPress sites generate unique interaction patterns that require specialized tracking:

  • Form plugin submissions (Contact Form 7, Gravity Forms, WPForms)
  • WooCommerce events (product views, cart actions, checkout steps)
  • Page builder interactions (Elementor popups, Divi modules)
  • Content engagement (blog comments, downloads, video plays)
  • User authentication (login, registration, profile updates)

Enhanced Measurement (Automatic Events)

GA4's Enhanced Measurement automatically tracks common events when enabled in your GA4 property settings.

Automatic Events Available

  • page_view - Every page load
  • scroll - 90% scroll depth
  • click - Outbound link clicks
  • view_search_results - WordPress search usage (if ?s= parameter detected)
  • video_start, video_progress, video_complete - Embedded YouTube videos
  • file_download - PDF, ZIP, DOC, etc. downloads

Enabling Enhanced Measurement

  1. Go to Google Analytics → Admin → Data Streams
  2. Click your WordPress web stream
  3. Toggle Enhanced measurement to ON
  4. Customize which events to track

WordPress-Specific Configuration

Enhanced Measurement may need WordPress adjustments:

// Ensure search parameter is recognized
add_filter('query_vars', 'ensure_search_param');
function ensure_search_param($vars) {
    $vars[] = 's'; // WordPress search parameter
    return $vars;
}

// Track WordPress search as GA4 event
add_action('wp_footer', 'track_wordpress_search');
function track_wordpress_search() {
    if (is_search()) {
        $search_term = get_search_query();
        ?>
        <script>
            gtag('event', 'search', {
                'search_term': '<?php echo esc_js($search_term); ?>'
            });
        </script>
        <?php
    }
}

Form Tracking

WordPress forms are critical conversion points that require accurate tracking.

Contact Form 7 (CF7)

CF7 provides JavaScript hooks for tracking submissions:

add_action('wp_footer', 'cf7_ga4_tracking');
function cf7_ga4_tracking() {
    ?>
    <script>
        document.addEventListener('wpcf7mailsent', function(event) {
            gtag('event', 'form_submit', {
                'event_category': 'Contact Form',
                'event_label': 'Contact Form 7',
                'form_id': event.detail.contactFormId,
                'form_name': event.detail.unitTag,
                'value': 1
            });
        }, false);

        // Track form submission failures
        document.addEventListener('wpcf7mailfailed', function(event) {
            gtag('event', 'form_error', {
                'event_category': 'Contact Form',
                'event_label': 'Submission Failed',
                'form_id': event.detail.contactFormId
            });
        }, false);
    </script>
    <?php
}

Gravity Forms

Gravity Forms offers hooks and Gravity Forms Google Analytics add-on:

Manual Tracking:

// Add to functions.php
add_action('gform_after_submission', 'gf_ga4_tracking', 10, 2);
function gf_ga4_tracking($entry, $form) {
    ?>
    <script>
        gtag('event', 'form_submit', {
            'event_category': 'Gravity Forms',
            'event_label': '<?php echo esc_js($form['title']); ?>',
            'form_id': '<?php echo $form['id']; ?>',
            'form_name': '<?php echo esc_js($form['title']); ?>',
            'value': 1
        });
    </script>
    <?php
}

Using Official Add-On:

  1. Install Gravity Forms Google Analytics add-on
  2. Navigate to Forms → Settings → Google Analytics
  3. Configure event tracking parameters
  4. Map form fields to GA4 parameters

WPForms

WPForms Pro includes built-in GA4 integration:

Automatic Setup:

  1. WPForms → Settings → Integrations
  2. Click Google Analytics
  3. Enter your GA4 Measurement ID
  4. Enable Form Submissions tracking

Manual Tracking:

// Add via WPForms → Settings → Advanced → Custom Code
jQuery(document).on('wpformsAjaxSubmitSuccess', function(event, data) {
    gtag('event', 'form_submit', {
        'event_category': 'WPForms',
        'event_label': data.form_id,
        'form_id': data.form_id,
        'value': 1
    });
});

Elementor Forms

Track Elementor form submissions:

add_action('wp_footer', 'elementor_form_ga4_tracking');
function elementor_form_ga4_tracking() {
    if (!did_action('elementor/loaded')) {
        return;
    }
    ?>
    <script>
        jQuery(document).on('submit_success', function(event, data) {
            gtag('event', 'form_submit', {
                'event_category': 'Elementor Form',
                'event_label': data.id || 'Unknown Form',
                'form_id': data.id,
                'value': 1
            });
        });
    </script>
    <?php
}

WooCommerce Event Tracking

See dedicated WooCommerce E-commerce Guide for full implementation.

Quick Overview

Essential WooCommerce events:

  • view_item - Product page views
  • add_to_cart - Add product to cart
  • remove_from_cart - Remove from cart
  • begin_checkout - Start checkout process
  • add_payment_info - Payment method selected
  • purchase - Order completed

Custom Button and CTA Tracking

Track WordPress-specific CTAs and buttons:

add_action('wp_footer', 'custom_cta_tracking');
function custom_cta_tracking() {
    ?>
    <script>
        // Track all buttons with class 'cta-button'
        document.querySelectorAll('.cta-button, .wp-block-button__link').forEach(function(button) {
            button.addEventListener('click', function() {
                gtag('event', 'cta_click', {
                    'event_category': 'CTA',
                    'event_label': this.textContent.trim(),
                    'button_text': this.textContent.trim(),
                    'button_url': this.href || 'no-url',
                    'page_location': window.location.pathname
                });
            });
        });

        // Track newsletter signups
        document.querySelectorAll('.newsletter-signup-button').forEach(function(button) {
            button.addEventListener('click', function() {
                gtag('event', 'newsletter_signup', {
                    'event_category': 'Engagement',
                    'event_label': 'Newsletter Signup Clicked'
                });
            });
        });

        // Track video plays (non-YouTube)
        document.querySelectorAll('video').forEach(function(video) {
            video.addEventListener('play', function() {
                gtag('event', 'video_start', {
                    'event_category': 'Video',
                    'event_label': video.currentSrc || 'unknown',
                    'video_url': video.currentSrc
                });
            });
        });
    </script>
    <?php
}

WordPress-Specific User Events

User Login Tracking

// Track user logins
add_action('wp_login', 'track_user_login', 10, 2);
function track_user_login($user_login, $user) {
    // Set cookie to trigger GA4 event on next page load
    setcookie('user_logged_in', 'true', time() + 60, '/');
}

add_action('wp_footer', 'ga4_login_event');
function ga4_login_event() {
    if (isset($_COOKIE['user_logged_in'])) {
        setcookie('user_logged_in', '', time() - 3600, '/'); // Clear cookie
        ?>
        <script>
            gtag('event', 'login', {
                'method': 'WordPress'
            });
        </script>
        <?php
    }
}

User Registration

add_action('user_register', 'track_user_registration');
function track_user_registration($user_id) {
    setcookie('user_registered', 'true', time() + 60, '/');
}

add_action('wp_footer', 'ga4_registration_event');
function ga4_registration_event() {
    if (isset($_COOKIE['user_registered'])) {
        setcookie('user_registered', '', time() - 3600, '/');
        ?>
        <script>
            gtag('event', 'sign_up', {
                'method': 'WordPress'
            });
        </script>
        <?php
    }
}

Comment Submissions

add_action('comment_post', 'track_comment_submission', 10, 2);
function track_comment_submission($comment_ID, $comment_approved) {
    if ($comment_approved === 1) {
        setcookie('comment_submitted', 'true', time() + 60, '/');
    }
}

add_action('wp_footer', 'ga4_comment_event');
function ga4_comment_event() {
    if (isset($_COOKIE['comment_submitted'])) {
        setcookie('comment_submitted', '', time() - 3600, '/');
        ?>
        <script>
            gtag('event', 'comment_submit', {
                'event_category': 'Engagement',
                'event_label': 'Blog Comment'
            });
        </script>
        <?php
    }
}

Download Tracking

Track specific file downloads beyond Enhanced Measurement:

add_action('wp_footer', 'enhanced_download_tracking');
function enhanced_download_tracking() {
    ?>
    <script>
        document.querySelectorAll('a').forEach(function(link) {
            const href = link.getAttribute('href');
            if (!href) return;

            // Define trackable file extensions
            const extensions = /\.(pdf|zip|docx?|xlsx?|pptx?|txt|csv|mp4|mp3|avi|mov)$/i;

            if (extensions.test(href)) {
                link.addEventListener('click', function() {
                    const fileName = href.split('/').pop();
                    const fileExtension = fileName.split('.').pop().toLowerCase();

                    gtag('event', 'file_download', {
                        'event_category': 'Downloads',
                        'event_label': fileName,
                        'file_name': fileName,
                        'file_extension': fileExtension,
                        'link_url': href
                    });
                });
            }
        });
    </script>
    <?php
}

Page Builder-Specific Tracking

Elementor Popup Tracking

// Add to your theme or custom plugin
jQuery(window).on('elementor/frontend/init', function() {
    elementorFrontend.hooks.addAction('frontend/element_ready/popup.default', function($scope) {
        $scope.on('click', function() {
            gtag('event', 'popup_open', {
                'event_category': 'Elementor',
                'event_label': $scope.data('id') || 'Unknown Popup'
            });
        });
    });
});

Divi Module Tracking

// Track Divi button clicks
jQuery(document).ready(function($) {
    $('.et_pb_button').on('click', function() {
        const buttonText = $(this).text();
        gtag('event', 'divi_button_click', {
            'event_category': 'Divi Modules',
            'event_label': buttonText,
            'button_text': buttonText
        });
    });
});

Advanced WordPress Event Tracking

User Properties

Set user properties based on WordPress user data:

add_action('wp_footer', 'set_user_properties');
function set_user_properties() {
    if (!is_user_logged_in()) {
        return;
    }

    $user = wp_get_current_user();
    $user_role = !empty($user->roles) ? $user->roles[0] : 'none';
    $registration_date = get_userdata($user->ID)->user_registered;
    $user_age_days = floor((time() - strtotime($registration_date)) / (60 * 60 * 24));

    ?>
    <script>
        gtag('set', 'user_properties', {
            'user_role': '<?php echo esc_js($user_role); ?>',
            'account_age_days': <?php echo $user_age_days; ?>,
            'logged_in': 'yes'
        });
    </script>
    <?php
}

Custom Dimensions via Post Meta

Track custom post metadata as event parameters:

add_action('wp_footer', 'track_post_metadata');
function track_post_metadata() {
    if (!is_single()) {
        return;
    }

    global $post;
    $author = get_the_author_meta('display_name', $post->post_author);
    $categories = wp_get_post_categories($post->ID, array('fields' => 'names'));
    $word_count = str_word_count(strip_tags($post->post_content));
    $reading_time = ceil($word_count / 200); // Assuming 200 words/minute

    ?>
    <script>
        gtag('event', 'page_view', {
            'content_type': 'blog_post',
            'author': '<?php echo esc_js($author); ?>',
            'categories': '<?php echo esc_js(implode(', ', $categories)); ?>',
            'word_count': <?php echo $word_count; ?>,
            'reading_time_minutes': <?php echo $reading_time; ?>,
            'publish_date': '<?php echo get_the_date('Y-m-d'); ?>'
        });
    </script>
    <?php
}

Scroll Depth Tracking (Custom Intervals)

More granular than Enhanced Measurement's 90%:

// Add to footer
let scrollMarks = {25: false, 50: false, 75: false, 90: false, 100: false};

window.addEventListener('scroll', function() {
    const scrollPercent = (window.scrollY + window.innerHeight) / document.body.scrollHeight * 100;

    Object.keys(scrollMarks).forEach(function(mark) {
        if (scrollPercent >= mark && !scrollMarks[mark]) {
            scrollMarks[mark] = true;
            gtag('event', 'scroll', {
                'event_category': 'Scroll Depth',
                'event_label': mark + '%',
                'percent_scrolled': mark,
                'page_location': window.location.pathname
            });
        }
    });
});

Event Tracking with GTM

If using Google Tag Manager instead of direct GA4:

  1. Fire events to dataLayer:
add_action('wp_footer', 'push_to_data_layer');
function push_to_data_layer() {
    if (is_single()) {
        global $post;
        ?>
        <script>
            dataLayer.push({
                'event': 'blog_post_view',
                'postID': '<?php echo $post->ID; ?>',
                'postTitle': '<?php echo esc_js($post->post_title); ?>',
                'postAuthor': '<?php echo esc_js(get_the_author()); ?>',
                'postCategories': '<?php echo esc_js(implode(', ', wp_get_post_categories($post->ID, array('fields' => 'names')))); ?>'
            });
        </script>
        <?php
    }
}
  1. Create GTM trigger for event equals blog_post_view
  2. Create GA4 Event Tag that uses dataLayer variables

See GTM Data Layer Guide for comprehensive GTM setup.

Debugging Event Tracking

Browser Console Check

// View all dataLayer pushes
console.log(window.dataLayer);

// Monitor real-time pushes
const originalPush = window.dataLayer.push;
window.dataLayer.push = function() {
    console.log('dataLayer.push:', arguments);
    return originalPush.apply(this, arguments);
};

GA4 DebugView

Enable debug mode:

gtag('config', 'G-XXXXXXXXXX', {
    'debug_mode': true
});

Then check Admin → DebugView in GA4 to see events in real-time.

Common Issues

Events not appearing in GA4:

  • Verify Measurement ID is correct
  • Check browser console for JavaScript errors
  • Ensure caching plugins aren't interfering
  • Confirm user is not logged in as admin (if admin tracking is disabled)

See Tracking Troubleshooting for detailed debugging.

Event Naming Best Practices

Follow GA4's recommended event naming:

  • Use lowercase with underscores: form_submit, not formSubmit or Form-Submit
  • Use recommended events when possible: login, sign_up, purchase
  • Keep parameter names consistent across events
  • Avoid PII in event names or parameters (emails, names, addresses)

Performance Considerations

Minimize impact of event tracking:

// Conditional event loading (only on relevant pages)
add_action('wp_footer', 'conditional_event_tracking');
function conditional_event_tracking() {
    // Only load WooCommerce events on shop pages
    if (function_exists('is_woocommerce') && is_woocommerce()) {
        wp_enqueue_script('woocommerce-ga4-events', get_stylesheet_directory_uri() . '/js/wc-ga4-events.js', array(), '1.0', true);
    }

    // Only load form tracking on pages with forms
    if (is_page(array('contact', 'quote-request'))) {
        wp_enqueue_script('form-ga4-events', get_stylesheet_directory_uri() . '/js/form-ga4-events.js', array(), '1.0', true);
    }
}

Next Steps

↑ Back to top
// SYS.FOOTER