GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In
Guides

Web Push (Paid Pubs)

Suggest Edits

Overview

Taboola Web Push enables you to re-engage visitors that opted in via a 1-click subscription.

Subscribed users receive push notifications, even when not on your website.

📘

End-to-end flow

Getting started

  1. Reach out to your Taboola Account Manager for your Web Push accounts.

Integration

  1. Integrate Web Push for a given domain.
  2. Integrate Web Push for given pages in that domain.
  3. (Optional) Implement additional features.

Getting started

To get started, reach out to your Taboola Account Manager for your Web Push accounts.

🚧

Which accounts?

Your Taboola Account Manager will provide new accounts (one account per domain).

You cannot re-use your existing Taboola accounts.

Integration

Step 1: Integrate Web Push for a given domain

  1. Add a file called sw.js to the root of the given domain.
  2. This file must contain the following, single line of code:
importScripts("https://cdn.taboola.com/webpush/tsw.js");

📘

2 filenames

  1. The name of the file is sw.js.
  2. The path within the file points to tsw.js.
  3. The above 2 filenames are intentionally different, and should not be changed.

Step 2: Integrate Web Push for pages in that domain

Now that you have integrated Web Push for the domain, you need to integrate it for the relevant pages under that domain.

  1. In the <head> section of the page, add the following<script>:

    Make sure to include an async attribute.

<script async src="https://cdn.taboola.com/webpush/publishers/{publisher_id}/taboola-push-sdk.js"></script>

🚧

Publisher ID

  1. Replace the {publisher_id} placeholder with your domain-specific publisher_id, as provided by Taboola - e.g. 123456.
  2. For example, if your Taboola Publisher ID is 123456, then the updated URL will be:
    src="https://cdn.taboola.com/webpush/publishers/123456/taboola-push-sdk.js"

Note: make sure to remove the curly braces.

  1. (Optional) Pass a traffic source for revenue attribution:
<script>
    // (Optional)
    // To pass a traffic source, place this code somewhere *after* `taboola-push-sdk.js`.
    // Naming convention: '<source name>_<campaign id>' e.g. 'taboola_1234'.
    Hood('utm', 'source', 'taboola_1234') // 'Hood' is declared in `taboola-push-sdk.js`.
</script>

📘

Traffic source

  • Providing a traffic source allows you to perform revenue attribution.
  • Use the following naming convention: '<source name>_<campaign id>' e.g. 'taboola_1234'.

🚧

If you choose to include the above line, you must place it after taboola-push-sdk.js (from step 1).

Step 3: Additional features

You can optionally implement additional features - e.g. a backdrop effect. See: additional features.

A sample page

For reference, a sample page is provided below:

<!-- The push permission prompt will display on page load. -->
<html>
  <head>
    <title>Test Page</title>
    <!-- Replace the `{publisher_id}` placeholder with your actual Publisher ID e.g. `123456`. -->
    <!-- E.g. if your Taboola Publisher ID is `123456`, then the updated URL will be:          -->
    <!-- src="https://cdn.taboola.com/webpush/publishers/123456/taboola-push-sdk.js"           -->
    <script async src="https://cdn.taboola.com/webpush/publishers/{publisher_id}/taboola-push-sdk.js"></script>
  </head>
  <body>
    <script>
      // (Optional)
      // To pass a traffic source, place this code somewhere *after* `taboola-push-sdk.js`.
      // Naming convention: '<source name>_<campaign id>' e.g. 'taboola_1234'.
      Hood("utm", "source", "taboola_1234"); // 'Hood' is declared in `taboola-push-sdk.js` (above).
    </script>
    
    <h1>Test Page</h1>
  </body>
</html>

🚧

publisher_id

Make sure to fill in your own publisher_id, as indicated by the code snippet comment.

Browser guidelines

📘

Supported browsers

Taboola Web Push works in any browser that supports the Web Push API - e.g.:

Desktop - Chrome, Firefox, Opera and Edge.*
Mobile - Chrome, Firefox, Opera, Samsung Internet Browser and UC Browser.*

For an up-to-date list of supported browsers, check online resources, such as caniuse.com.

Testing guidelines & tips

📘

Recommended rollout plan

Before rolling out to an entire site, consider starting with a test page:

  1. Perform the integration on a test page under the desired domain.
  2. Contact Taboola to verify the integration.
  3. Once your integration has been verified by Taboola for a test page, repeat it for all relevant pages in that domain.

📘

Tip: How to test a page multiple times

To test-drive the same page multiple times on Google Chrome (without using BrowserStack, or similar):

  1. Open the test page.
  2. Click on the View site information icon, on the left side of the address bar:
  3. Click on Reset permissions (under Notifications).
  4. Reload the page.
  • The above instructions apply to Google Chrome. (For other browsers, refer to your browser documentation.)
  • When testing, make sure that you do not have an ad blocker enabled.

What's next?

👉

Next up

➤ Additional features

Updated 7 months ago