AI Web Push and Google Tag Manager

This post shows, in a direct and practical way, how to use AI Web Push events in Google Tag Manager (GTM), how to enable debug mode, and how to build metrics and conversions based on these events. No extra SDK is needed: everything reaches GTM via dataLayer.push.

Overview

Push events are sent to GTM via the dataLayer with the prefix ai_web_push_... and provider ai_web_push.

The push_source field indicates the origin:

• custom_modal: flow through a custom modal.
• native_prompt: flow directly through the browser's native prompt.

Starting with version 1.7.5, the plugin automatically detects whether the browser supports push notifications. If it doesn't (Instagram, Facebook, or TikTok WebViews, iOS Safari outside a PWA, contexts without HTTPS), the ai_web_push_browser_not_supported event fires and the flow ends without errors.

Optional debug mode: localStorage['ai-web-push-debug'] = 'true' to see all events in the console.

Available events

Push format in GTM

Each event generates a dataLayer.push in this format:

{
  "event": "ai_web_push_<nome_do_evento>",
  "push_provider": "ai_web_push",
  "push_source": "custom_modal | native_prompt"
}

How to enable debug mode (without reloading)

In the browser console:

localStorage.setItem('ai-web-push-debug', 'true');
// para desativar:
// localStorage.removeItem('ai-web-push-debug');

With debug mode active, each event shows in the console:

• Event name (ai_web_push_*)
• push_source and details
• Preview of the object sent to the dataLayer
• Timestamp

How to test the scenarios

Unsupported browser (WebView, iOS Safari): Expected: browser_not_supported. The flow ends immediately, with no console errors.

Custom modal, user accepts: Expected: modal_shown → modal_accepted → prompt_shown → permission_granted → subscription_success.

Custom modal, user cancels: Expected: modal_shown → modal_dismissed.

Custom modal, user accepts the modal but denies the prompt: Expected: modal_shown → modal_accepted → prompt_shown → permission_denied.

Direct native prompt (Chrome), user accepts: Expected: prompt_shown → permission_granted → subscription_success.

Direct native prompt (Chrome), user denies: Expected: prompt_shown → permission_denied.

How to create tags in GTM

Trigger: Custom event = ai_web_push_subscription_success

Useful variables:

• push_source to segment modal vs. prompt.
• push_provider (always ai_web_push — useful if there are other providers).

Recommended tags:

• GA4: push subscription conversion.
• Google Ads: lead/subscription conversion.
• Facebook Pixel: custom subscription event.
• Hotjar/Clarity: funnel events.

Additional recommended tag: Create a trigger for ai_web_push_browser_not_supported and send it as an event to GA4. This lets you monitor how many visitors access your site on browsers without push support, helping you gauge the real impact and adjust your strategy.

Manual capture (without GTM)

You can listen for events in the browser:

aiWebPushFront.on('subscription_success', (detail) => {
  console.log('Nova inscrição via', detail.source);
});

// Detectar navegadores sem suporte:
aiWebPushFront.on('browser_not_supported', (detail) => {
  console.log('Navegador não suporta push notifications');
  // Exemplo: esconder botão de push, exibir mensagem alternativa
});

Available events: browser_not_supported, modal_shown, modal_accepted, modal_dismissed, prompt_shown, permission_granted, permission_denied, subscription_success, subscription_error.

Best practices

• Use push_source to compare modal vs. native prompt and optimize the journey.
• Monitor subscription_error as an alert in GTM (conversion drops).
• Monitor browser_not_supported to understand what percentage of visitors use incompatible browsers and adjust your engagement strategy.
• Leave debug mode off in production; only enable it for troubleshooting.

Quick reference

• Event prefix: ai_web_push_...
• Provider: ai_web_push
• Debug: localStorage['ai-web-push-debug']='true'
• Total events: 9 (see the table in "Available events")