Web Push Notifications Guide

A complete guide on how to build a subscriber list and send targeted web push notifications. Learn to re-engage visitors instantly with "Back in Stock" alerts, "Cart Abandonment" reminders, and personalized content recommendations directly in their browser.

Start Now
Start Here
Concept & Prerequisites
Collect Subscribers
Permission Prompt Setup
Design & Algorithm
Templates & Recommendations
A/B Testing
Optimize Opt-ins & Messages
QA & Preview
Test by Subscription ID
Performance Stats
Sent, Clicked & Revenue
Example: Back in Stock
Inventory Trigger
Example: Cart Reminder
Abandonment Flow
Example: New Sale
Recent View Trigger

Push Notification Playbook

Push notifications allow you to re-engage users even when they are not on your site. You can send targeted messages or personalized product/content recommendations directly to their browser.

How to Start (Wizard Selection)

Go to the Push Notification dashboard. You will see two primary wizards to choose from:

  1. Web Push Subscribe: Select this to set up the prompts (popups/banners) that ask visitors for permission to send notifications.
  2. Web Push Send: Select this to create and dispatch the actual campaigns or automated triggers to your subscriber list.

Quick Examples

  • Back in Stock: Notify users when an item they viewed is available again.
  • Cart Abandonment: Remind users to complete their purchase.
  • Price Drop: Alert users when a product they liked goes on sale.

Step-by-Step Summary

  1. Collect Subscribers: Use the "Subscribe" wizard to get permission.
  2. Select Algorithm: Choose logic (e.g., Cross-sell, Most Popular) in the "Send" wizard.
  3. Design: Create the notification (Title, Image, Icon, URL).
  4. QA: Preview the notification for specific users.
  5. Analyze: Track sent, viewed, clicked, and conversions.

Prerequisites (Must Have)

  • Subscriber Database: You must have permission to send notifications. Use Personyze to collect subscribers (see next tab) or sync your existing subscriber list.
  • Service Worker: A file (sw.js) must be placed in the root directory of your site to handle the push events.
  • Tracking Code: Personyze tracking must be active to trigger messages based on behavior.

Collect Subscribers

Before sending, you need to ask for permission using the "Web Push Subscribe" wizard.

Design the Prompt

You can customize the opt-in request to maximize acceptance rates. Options include:

  • Native Browser Prompt: The default browser request (simple allow/block).
  • Custom Banner/Popup: A designed overlay explaining why they should subscribe (e.g., "Get notified when items go on sale").
  • Two-Step Opt-In: Show a custom soft-prompt first; if they click "Yes," then show the native browser prompt. This prevents users from permanently blocking your site if they say "No" initially.

Design & Recommendation Logic

Use the "Web Push Send" wizard to configure your message.

1. Select Recommendation Algorithm

If sending product recommendations, choose the logic:

  • Cross-Sells for Items in Cart: "You forgot these..."
  • Recently Viewed: "Still interested in...?"
  • Back in Stock: Triggers when a previously viewed/liked item returns.

2. Design the Message

Since browser push notifications have a fixed structure, you cannot freely design the layout like an email. However, you can customize:

  • Title & Body: "Sale Alert! [Product Name] is 20% off."
  • Image: The main product image (dynamically pulled from the feed).
  • Icon: Your logo or a specific icon.
  • Action Buttons: "View Item" or "Buy Now" (Define the destination URL dynamically).

A/B Testing for Push

Personyze allows you to A/B test both the Subscription Process and the Push Messages themselves to optimize every stage of the funnel.

1. Testing the Subscription Prompt (Get More Subscribers)

Test different ways to ask for permission to maximize opt-in rates.

  • Prompt Style: Test a "Sticky Bar" vs. a "Central Popup".
  • Copy: Test "Get Updates" vs. "Don't Miss Out on Sales".
  • Timing: Test asking immediately on arrival vs. after 30 seconds or 2 page views.

2. Testing the Push Message (Get More Clicks)

Test the content of the notification to improve Click-Through Rate (CTR).

  • Title/Body: Test "Sale Ends Soon!" vs. "Last Chance: 50% Off".
  • Algorithm: Test sending "Recently Viewed" items vs. "Most Popular" items to see which drives more sales.
  • Imagery: Test showing the Product Image vs. a Lifestyle Image.

QA & Preview

Verify that the correct products and messages are being generated for specific users.

Simulation Step

  1. Go to the QA Step in the wizard.
  2. Enter a Subscription ID, User Email, or CRM ID.
  3. Personyze will simulate the logic and show you a preview of the push notification that user would receive based on their history.

Check: Does a user who viewed "red shoes" see the "red shoes" in the preview?

Performance & Analytics

Track the effectiveness of your push campaigns in the dashboard.

Key Metrics

  • Sent: Total number of notifications successfully dispatched.
  • Viewed: Number of notifications actually delivered and rendered on user screens.
  • Clicked: Users who clicked the notification to return to the site.
  • Conversions: Downstream actions during the session, such as:
    • Add to Cart: Items added after clicking.
    • Purchased: Direct revenue from the push campaign.
    • Content Goals: "Full Article Read" or "Video Watched".

Tracking: You can wrap links with unique UTM parameters in the design step to track traffic sources in Google Analytics.

Example: Back In Stock Alert

Scenario: A user views a product that is out of stock, then leaves.

Workflow

  1. Trigger: The product feed updates, changing the status of "Item X" from 0 to 10.
  2. Audience: Personyze identifies all users who viewed "Item X" in the last 30 days while it was out of stock.
  3. Message: "Good news! [Item Name] is back in stock. Grab it before it's gone."
  4. Result: User clicks, lands directly on the product page, and purchases.

Example: Cart Abandonment Reminder

Scenario: A user adds items to the cart but closes the browser without buying.

Workflow

  1. Trigger: "Cart Abandonment" event (e.g., 30 minutes of inactivity after add-to-cart).
  2. Audience: Users with > $0 in cart value.
  3. Message: "You left something behind! Complete your order for [Item Name] now."
  4. Result: High click-through rate as the intent to purchase was already established.

Example: Price Drop Alert

Scenario: An item a user was browsing goes on sale.

Workflow

  1. Trigger: Price change detected in the product feed (e.g., $100 -> $80).
  2. Audience: Users who viewed this specific item (or category) in the last 7 days.
  3. Message: "Price Drop! [Item Name] is now 20% off."
  4. Result: Urgent re-engagement driving traffic back to the site for a deal.

Frequently Asked Questions

Do I need a mobile app to send push notifications?
No. These are Web Push Notifications. They work on standard web browsers (Chrome, Firefox, Safari, Edge) on both Desktop and Android mobile devices, without requiring the user to install an app.
What is a Service Worker and why do I need it?
A Service Worker is a small JavaScript file (sw.js) that runs in the background of your visitor's browser. It is required to listen for incoming messages from Personyze even when your website tab is closed. You must upload this file to your site's root directory.
Can I personalize the message content?
Yes. You can insert dynamic variables into the title and body, such as the user's First Name, the specific Product Name they left in the cart, or their City.
What happens if the user is offline?
Push notifications have a "Time to Live" setting. If a user is offline when you send the message, the browser will queue it and display it the moment they reconnect to the internet, provided it is still within the validity window.
Can I A/B test the permission prompt?
Yes. You can run an A/B test on the Subscription Wizard to see which style (Popup vs. Sticky Bar), text ("Allow" vs. "Get Updates"), or timing (Immediate vs. 10-second delay) results in more subscribers.
Can I include product images?
Yes. Most modern browsers (like Chrome on Windows and Android) support "Big Images" in notifications. Personyze can dynamically pull the product image from your catalog feed to display in the notification.
What are the best triggers for e-commerce?
The highest converting triggers are usually Cart Abandonment (reminding users of left items), Price Drop Alerts (notifying users when a viewed item goes on sale), and Back in Stock notifications.
How do I avoid annoying my visitors?
Use a "Two-Step Opt-In". Show a custom, soft prompt (designed in Personyze) explaining the value first. If they click "No," you don't show the browser prompt, preventing them from permanently blocking your site. You can also set frequency caps on how often messages are sent.
Can I segment who gets the message?
Absolutely. You can target push campaigns based on any Personyze segment: Location, VIP Status, Past Purchase History, or specific pages visited.
How can I track the revenue from these campaigns?
The Personyze dashboard tracks "Sent," "Clicked," and "Conversions." If a user clicks a notification and purchases within the attribution window, that revenue is credited to the push campaign.
Does this work on iPhones (iOS)?
Yes, but with limitations. Apple has added support for Web Push on iOS 16.4+, but it typically requires the user to save your website to their Home Screen (PWA) before they can receive notifications.
Can I import my existing subscribers?
If you have existing "Push Tokens" (endpoint URLs) from another provider, migration is technically possible but complex. It is generally recommended to start fresh or consult with support, as push tokens are often tied to specific GCM/FCM project keys.
What is a "Welcome Drip" campaign?
This is an automated sequence. You can set a rule to send Message A immediately after signup ("Thanks for subscribing!"), followed by Message B ("Here is a 10% coupon") 2 days later.
Can I send content recommendations instead of products?
Yes. Publishers often use push notifications to send "Breaking News" or "Recommended Articles" based on the reader's interest history (e.g., sending Sports news only to users who read the Sports section).
How do I test before sending to everyone?
Use the QA Step. You can enter your own unique Subscription ID (found in your browser console or user profile) to trigger a real test notification to your device without disturbing other users.