How to create Web Push reports in GA4 via GTM

This is the most complete guide to integrating the AI Web Push plugin with Google Tag Manager (GTM) and Google Analytics 4 (GA4).

By the end of this tutorial, you won't just know how many people subscribed — you'll understand where you're losing users in the permission funnel, what the native prompt's rejection rate is, and how to monitor technical errors in real time.

⚠️ Important: To have access to all the events described in this guide, make sure your AI Web Push plugin is updated to version 1.7.6 or later. Check the installed version on your WordPress plugins page.

Why monitor Push events?

Web Push subscription is a critical conversion funnel for any site looking to retain its audience.

1. Permission funnel: Does the user see the modal? Do they click accept? Do they confirm in the browser?
2. Conversion source: Does the custom modal convert better than the direct native prompt?
3. Error monitoring: Failures communicating with Firebase or browser blocks.

The AI Web Push plugin exposes 9 detailed events in the data layer (dataLayer) to enable this deep analysis.

Complete event mapping

All events are sent with the prefix ai_web_push_.

Parameters sent

Along with each event, we send extra data for segmentation:

• push_provider: Always ai_web_push (useful for filtering if you have other scripts).
• push_source:
  • custom_modal: The flow started through the plugin's custom modal.
  • native_prompt: The flow went directly through the browser's native prompt.
• error: (Only on the error event) The technical error message.

Part 1: Setup in Google Tag Manager (GTM)

Let's set up GTM to "read" this data and send it to GA4.

Step 1: Create Data Layer Variables

We need to capture the parameters the plugin sends.

1. Go to Variables > New (User-Defined Variables).
2. Configuration: Data Layer Variable.
3. Create the following variables:

Step 2: Create a Smart Trigger (Regex)

Instead of creating 9 different triggers, we'll use a Regular Expression (Regex) to capture all of the plugin's events at once. This keeps your GTM clean.

1. Go to Triggers > New.
2. Type: Custom Event.
3. Event name: ^ai_web_push_.*
   • Explanation: ^ means "starts with," and .* means "anything after." This captures all 9 events.
4. Configuration: Check the "Use regex matching" option next to the event name.
5. Trigger name: Event - AI Web Push (All).
6. Save.

Step 3: Create the Generic GA4 Tag

Now, a single tag will send all events to GA4, keeping the original name or cleaning it up.

1. Go to Tags > New.
2. Type: Google Analytics: GA4 Event.
3. Measurement ID: Your GA4 configuration tag.
4. Event name: {{Event}}
   • Pro tip: By using the automatic variable {{Event}}, GA4 will receive the exact event name (e.g., ai_web_push_subscription_success). If you want to clean up the name (e.g., remove the prefix), you can create a Regex Table Variable in GTM, but sending the original name is simpler and works perfectly.
5. Event parameters: Add the parameters for analysis:
   • source: {{dlv - push_source}}
   • provider: {{dlv - push_provider}}
   • error_message: {{dlv - push_error}}
6. Triggering: Select the Event - AI Web Push (All) trigger we created.
7. Save and Publish the container.

Part 2: Setup in Google Analytics 4 (GA4)

Now the data is flowing into GA4. Let's organize it.

1. Mark the Main Conversion

The most important event is ai_web_push_subscription_success.

1. In GA4, go to Admin > Data Display > Key Events (formerly Conversions).
2. Click New key event.
3. Event name: ai_web_push_subscription_success.
4. Save.

Now every subscription will count as a conversion in your acquisition and engagement reports.

2. Create Custom Dimensions (Optional but Recommended)

To use the source and error_message parameters in reports, you need to register them.

1. Go to Admin > Data Display > Custom Definitions.
2. Create custom dimension:
   • Dimension name: Push Source
   • Event parameter: source
3. Create custom dimension:
   • Dimension name: Push Error Message
   • Event parameter: error_message

Part 3: Advanced Reports (Explore)

This is where the magic happens. Let's create views that the standard report doesn't show.

Report 1: The Real Permission Funnel

Find out where users drop off.

1. In GA4, go to Explore > Blank.
2. Select the Funnel exploration technique.
3. Set up the steps:
   • Step 1 (Viewed): Event ai_web_push_modal_shown OR ai_web_push_prompt_shown.
   • Step 2 (Interacted): Event ai_web_push_modal_accepted.
   • Step 3 (Allowed): Event ai_web_push_permission_granted.
   • Step 4 (Subscribed): Event ai_web_push_subscription_success.
4. Result: You'll see a visual drop-off rate at each step.

Report 2: Source Comparison (Modal vs. Native)

Which method converts more?

1. Create a Free form exploration.
2. In Rows, drag the Push Source dimension.
3. In Columns, drag the ai_web_push_subscription_success event.
4. Result: A table comparing how many subscribers came via custom_modal vs. native_prompt.

Report 3: Error Monitoring

Are your users having technical problems?

1. Create a Free form exploration.
2. Filter by the ai_web_push_subscription_error event.
3. In Rows, place the Push Error Message dimension.
4. In Values, place Event count.
5. Result: A list of the most common errors (e.g., "Notifications blocked," "Network error").

Manual Capture via JavaScript (For Developers)

If you don't use GTM and want to send data directly to your CRM, database, or another analytics tool, you can use the plugin's event system.

The global aiWebPushFront object exposes an on() method for listening to events.

// Exemplo: Enviar inscrição para seu backend/CRM
if (window.aiWebPushFront) {
    window.aiWebPushFront.on('subscription_success', function(detail) {
        console.log('Usuário inscrito!', detail);
        
        // Exemplo: fetch para sua API
        fetch('/minha-api/registrar-push', {
            method: 'POST',
            body: JSON.stringify({
                token: detail.token, // O plugin pode expor o token no detail dependendo da versão
                source: detail.source
            })
        });
    });

    // Exemplo: Monitorar erros
    window.aiWebPushFront.on('subscription_error', function(detail) {
        console.error('Erro no push:', detail.error);
    });
}

How to Debug and Test

Don't publish without testing!

1. Enable the Plugin's Debug Mode:
   • Open the browser console (F12).
   • Type: localStorage.setItem('ai-web-push-debug', 'true')
   • Reload the page.
   • Now the plugin will show colored logs in the console for each step.
2. Use GTM Preview:
   • Click "Preview" in GTM.
   • Connect to your site.
   • Go through the subscription flow.
   • In the Tag Assistant tab, check whether the ai_web_push_* events appear in the left sidebar and whether the GA4 tag fired.
3. GA4 DebugView:
   • In GA4, go to Admin > DebugView.
   • You should see events arriving in real time on the timeline.

Summary of Files Involved

• Plugin: Emits the events into the dataLayer.
• GTM: Captures the events via a Regex Trigger and sends them to GA4.
• GA4: Processes the data, marks conversions, and generates reports.

With this setup, you have a complete observatory of the health and performance of your Web Push notifications.