--- title: AJO Web Push slug: docs/ajo-web-push docTags: createdAt: 2026-02-17T05:36:15.651Z --- This feature allows your web app to receive messages pushed from a server, even when the website is not currently loaded in the browser. This document describes how to implement **Web Push Notifications** using: - Adobe Experience Platform Web SDK (Data Collection) - Adobe Journey Optimizer (AJO) ### Generate VAPID Keys **Install web-push globally** npm install web-push -g **Generate VAPID Key Pair** web-push generate-vapid-keys ### Important - Store the **Private Key securely** - Use the **Public Key** in Web SDK configuration - Use **both keys** in AJO Push Credentials :::hint{type="info"} The Service Worker JavaScript file must be added to the website to enable Web Push functionality. This has already been implemented on our website. ::: ### Configure Push Credentials in Adobe Journey Optimizer 1. Go to **Administration โ†’ Channels โ†’ Push Credentials** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/YfvwNlSRyCkflTqGIYRRJ_image.png" size="40" width="1016" height="1728" position="center" darkWidth="1016" darkHeight="1728" showCaption="false" indent="1"} 2. Click on **Create push credential** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/BEppLGzXALp-20BbDv1FK_image.png" size="68" width="2352" height="154" position="center" darkWidth="2352" darkHeight="154" showCaption="false"} 3. Provide details.: - Select Web in platform - VAPID Public Key - VAPID Private Key - Application ID - It can be any unique identifier. eg web-push-projectname ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/0MgRhSfA67BYiBMscElqH_image.png) ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/areAyIQ0OunnhRj1Ncpm2_image.png) 4. Click on Submit ### Create Web Push Channel 1. Go to **Channels** ->**Channel Configurations** 2. Click on **Create Channel Configuration**. ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/EjlO44TY18BeL3aqsUZ8g_image.png) 3. Provide details. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/3uTePVJxvudrK1vbTN0Qz_image.png" size="64" width="1768" height="1672" position="center" showCaption="false"} :::Paragraph{indent="1"} Associate: Push Credentials created above ::: 4. Click on Submit. ### Configure Web SDK (Data Collection) **** 1. Go to **Tags. **Choose the property that was created as part of your project. 2. Go to** Extensions.** 3. Click on **Adobe Experience Platform Web SDK. **On the right side, click on** Configure.** ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/wd_UM7R-S6Yz2Oy9vPX_u_image.png) 4. Under ** Build options**, Enable **Push Notifications.** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/BbuZUA_7C52V1mD3D4RuU_image.png" size="56" width="422" height="140" position="center" showCaption="false"} ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/ltlbdNn4rR7BBV_W-mhWK_image.png" size="86" width="876" height="138" position="center" showCaption="false"} 5. Scroll down and provide details. - VAPID Public Key - Application ID: The app ID used when saving the VAPID keys inside Adobe Journey Optimizer -> Channels -> Push Settings -> Push Credentials - Tracking Dataset ID: The ID of the system dataset with the name "AJO Push Tracking Experience Event Dataset". Get this from Adobe Journey Optimizer -> Datasets. ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Ol2v5hEwAMzmGFyclxu0r_image.png" size="56" width="1042" height="818" position="center" showCaption="false"} 6. Save the extension. 7. Create a rule to capture push subscription. :::Paragraph{indent="1"} Click on **Add rule.** ::: :::Paragraph{indent="1"} Provide details: ::: :::Paragraph{indent="1"} Name: Web Push ::: :::Paragraph{indent="1"} Events: Core - Page Bottom ::: :::Paragraph{indent="1"} Actions: Core - Custom Code. ::: :::Paragraph{indent="1"} Add the code below: ::: :::Paragraph{indent="1"} ::: :::CodeblockTabs{indent="2"} ```javascript navigator.serviceWorker .register("/web/alloyServiceWorker.js", { scope: "/web/" }) .then(() => navigator.serviceWorker.ready) .then(() => { if (Notification.permission === "granted") { alloy("sendPushSubscription"); } else if (Notification.permission === "default") { return Notification.requestPermission().then(permission => { if (permission === "granted") { alloy("sendPushSubscription"); } }); } }) .catch(err => console.error("Push setup failed:", err)); ``` ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/VT7Tn5IEZ-uDkryGBvqDo_image.png" size="72" width="2822" height="1218" position="center" showCaption="false"} 8. Click on Save. Publish the property. ### Create Web Push Campaign 1. Go to **Campaigns. **Click on **Action** 2. Click on the **Create Campaign **button 3. Provide details. - Name - Select the Action, which isthe channel configuration created above - Audience ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/go4s4xi0M6-xHVoT_cHcO_image.png) - Configure content :::Paragraph{indent="1"} **Title:** Sale: 30% Off Today Only! ::: :::Paragraph{indent="1"} **Body:** Your favorite activewear just got lighter on your wallet. Shop before midnight! ::: :::Paragraph{indent="1"} **Body click behavior** ::: :::Paragraph{indent="1"} ****[https://dsn.adobe.com/web/luma3/yoga](https://dsn.adobe.com/web/luma3/yoga) ::: :::Paragraph{indent="1"} **Add media:** ::: :::Paragraph{indent="1"} ****[https://demo-system-next.s3.amazonaws.com/assets/luma/products/ws06-purple\_main\_2.jpg](https://demo-system-next.s3.amazonaws.com/assets/luma/products/ws06-purple_main_2.jpg) ::: :::Paragraph{indent="1"} Click on **Review to activate**. Click on Activate. ::: :::Paragraph{listRestartPolite="5" indent="1"} It should now send Push to the audience. ::: :::Paragraph{listRestartPolite="5" indent="1"} ::: ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1CupVjYniVvVy7epKOphz_image.png" size="54" width="682" height="834" position="center" showCaption="false"} ### Allow Notifications: ๐Ÿ”ง **Chrome Push Notification ** 1. Open **Chrome** โ†’ click **3 dots (โ‹ฎ)** โ†’ **Settings** 2. Go to **Privacy and security** โ†’ **Site Settings** 3. Look for your **domain**: Under Notifications: - Change to **Ask(default)** - This enables the site to request notification permission 4. Refresh your website and try subscribing to push notifications again ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/PrMWutROpFUxZypWmrE4k_image.png) ๐Ÿ”ง **Firefox Push Notification ** 1. Open your website in **Firefox** 2. Look at the **left side of the address bar** โ†’ you may see an **information icon ** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/if_UBTKOZpHvdZdWlTxTo_image.png" size="22" width="66" height="36" position="center" showCaption="false"} 3. Click the icon โ†’ click **Allow** ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/SqfylMY0AgDXO7Fq5P6I7_image.png" size="66" width="1212" height="298" position="center" showCaption="false"} ### Luma โ€” Web Push Journey (Men Category Interest) **Luma** uses this Journey in Adobe Experience Platform Journey Optimizer to send targeted **Web Push notifications** to users who have: - Registered (opted-in) for Web Push notifications - Shown interest in the **Menโ€™s category** on the website ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/sHE-Yq9p0jPYW2nT8RSs__image.png) Refer to this link for the journey - [Web push for audience interested in men's category](https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/journeys/journey/78811052-b9af-459c-baf5-7942b8b790ba)