Web Push via Google Tag Manager

How to implement push notifications on your website through Google Tag Manager

Overview

Implement push notifications in four steps without any coding! Pushwoosh WebSDK Lite can be added to your website through Google Tag Manager, making the integration process as easy as possible.

Partial Functionality

Note that of all visitors of your website, only those using Chrome or Firefox would be able to subscribe for and receive push notifications. The WebSDK Lite also has limited access to Pushwoosh features, such as custom Tags, UserIDs, or event-triggered messaging. For details, please reach out to our Support Team!

Integration

1. Firebase Credentials

In the Firebase Console, choose your project to obtain your Firebase Server Key and Sender ID. Please see the screenshot below for reference:

2. Pushwoosh Control Panel

Go to Pushwoosh Control Panel and add a new app. On the opened page, configure Chrome or Firefox platform by clicking the Configure button in the respective row. Fill in the form:

• The Server Key from Firebase Console into the API key field;

• The Sender ID from Firebase Console into the FCM Sender ID field;

• The exact address of your website into Website Name field.

Make sure to copy the Application Code of the newly created app, you'll need it later. The app code is highlighted below:

3. Google Tag Manager

a. In Google Tag Manager, choose a container or create a new one.

b. Create a new Tag and choose Custom HTML in Tag Configuration.

c. Copy the script below and paste it into the HTML field;

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush-lite/v1/pushwoosh-web-notifications-lite.js?pw_application_code=#####-#####" async></script>

d. Change number signs #####-##### (highlighted on the picture below) in the script to your Pushwoosh Application Code, which you acquired in Step 2.

e. Scroll down to Triggering options and choose All Pages.

f. Click "Save". Your Tag is ready!

4. Push Subscription Button

Let users subscribe for push notifications with a push subscription button. To set up the button, simply add the following script via Google Tag Manager.

<div style="text-align:center;margin:90px 0;">
  <button style="color:#000000;background: none;font-size: 16px;cursor: pointer;font-weight: 700;padding:0 60px;line-height: 60px;border:3px solid #000000;" type="button" name="button" onclick="window.pushwooshLite.instance.showSubscriptionWindow()">Subscribe Now</button>
</div>

All done! Your website's visitors can now subscribe for and receive push messages.