Installing PushPro On Your Website

Google Tag Manager

Install the PushPro code snippet with Google Tag Manager

In this guide, we’ll explain how you can install the PushPro code snippet using Google Tag Manager, making the installation procedure even easier!

Google Tag Manager

Most marketers and website owners are familiar with Google Tag Manager (GTM). It’s a free tool by Google which you can use to set up tags on your website. These tags get triggered based on conditions you define. A few very common tags are the Google Analytics (GA) tag which ensures the behavior of your website visitor gets pushed to GA. Or the Hotjar tag which heat maps the cursor of your visitors so you can analyze their behavior.

Besides these pre-defined tags, you can also add ‘custom’ tags. That’s exactly what you’ll use to install the PushPro code snippet.

All you have to do is follow a few easy steps which we'll outline here:

Step 1. Click "add a new tag"

Screenshot of Google Tag Manager overview

Step 2. Click on "Tag Configuration"

Screenshot of Google Tag Manager showing different options to choose from

Step 3. Select ‘Custom HTML’ as the tag type

Screenshot of Google Tag Manager where you can choose your tag type

Step 4. Copy paste the PushPro code snippet which you can find in your domain settings

Screenshot of Google Tag Manager where you should paste the PushPro code snippet

Step 5. Trigger it on all pages or customize to your liking

Screenshot of the triggering settings in Google Tag Manager

Step 6. Save the Tag changes and submit it to your live website

Screenshot on how to save the tag changes in Google Tag Manager



That’s it, easy right? You have now successfully installed the PushPro snippet on your website.

Don't forget to upload the PushPro file

Now that you have your code snippet installed with GTM, you can add the service worker Javascript file to the root of your website source code. If you manage the content of your website yourself, you can insert the files into the root folder.

Screenshot of a website root folder where you have to upload the js.file of PushPro

Make sure to always place the service worker Javascript file to the root of your domain. If you don't know how, contact support or check the installation here.

Easily manage PushPro on your website with Google Tag Manager. Get ready to send Push Notifications directly from your website to your user’s mobile device. Need any further help? Contact us at hello@pushpro.io!



Verify your setup

You can verify if you set everything up correctly by navigating to https://yourdomain.com/. If you see a push notification opt-in request, everything is working! That’s all, your website is now ready to send push notifications!

If you do not see an opt-in request, you can check whether the code snippet and javascript file were correctly added. Navigate to https://yourdomain.com/sw.js. Here you should find the following text:

importScripts('https://storage.googleapis.com/push-pro-java-scripts/pushpro-sw.js');

Next up, you can verify whether you correctly added the code snippet. On https://yourdomain.com/, right-click anywhere on the website and select “Page Source”. Here, you should find the following text:

<script></script>
window.__pushpro = {
site_uuid: "your-unique-identifier",
}

https://storage.googleapis.com/push-pro-java-scripts/pushpro-lib.js">

Ready to take PushPro for a spin? Get started for free now.

Drop us a mail

Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again or contact support@pushpro.io

Social Channels