1. Startseite
  2. /Platforms
  3. /Web
  4. /Advanced
  5. /Tag Manager Integrations

Tag Manager Integrations

Deploy web push notifications on your site using third-party tag managers.

Supported Tag Managers

Our web push SDK can be deployed via Google Tag Manager (GTM), Ensighten, and Tealium. For GTM integrations, you will use the Custom HTML tag type; instructions are provided below.

For Ensighten and Tealium, select the Airship tag option in the respective tag manager UI when setting up web push notifications.

Google Tag Manager

The Airship Web SDK can be implemented using Google Tag Manager .

This section assumes that you have already completed the following steps at the beginning of this guide:

  1. Airship Setup
  2. Add push-worker.js to your root directory
 Important

The push worker must be placed at the root of the server. Its function is to create and sustain what is called a service worker , which provides a safe and secure way to interact with a site as a background task. These files cannot be managed within the Google Tag Manager environment, as they live at a level above HTML content and must be directly accessible rather than imported into a page.

The remaining steps are handled through the Google Tag Manager interface.

Install Google Tag Manager

  1. In Google Tag Manager , select your container, click Admin in the navigational header, then click Install Google Tag Manager.
  2. Follow Google’s instructions to add Google Tag Manager to any HTTPS-delivered page.

Configure Your Web Push Tag

Next, we will configure a new tag in your newly-created Google Tag Manager container, using the Custom HTML tag type.

  1. Click Workspace in the navigational header, then click the New Tag pane.
  2. Enter “Web Push” in the title field, then click the Tag Configuration pane.
  3. Click the tag type Custom HTML, then paste the code at the end of this section into the HTML field.
    • Replace all bracketed values in the provided GTM code, e.g., <Your App Key>, with the corresponding values for your site. You can find them in your push-worker.js file.
    • Do not check the box for Support document.write
Configure Web Push Tag
<script type="text/javascript">
  var options = {
   appKey: '<Your App Key>';
   token: '<Your token from sample.html>';
   vapidPublicKey: '<base 64 encoded vapidPublicKey>';
  }

  // This value is for the US data center. If in the EU data center, use
  // https://aswpsdkeu.com/notify/v2/ua-sdk.min.js
  var sdkUrl = 'https://aswpsdkus.com/notify/v2/ua-sdk.min.js'

  // Optional timestamp and signature for the tag
  // 86acbd31cd7c09cf30acb66d2fbedc91daa48b86:1548980517.16
  !function(n,r,e,t,c){var i,o="Promise"in n,u={then:function(){return u},catch:function(n){
  return n(new Error("Airship SDK Error: Unsupported browser")),u}},s=o?new Promise((function(n,r){i=function(e,t){e?r(e):n(t)}})):u
  ;s._async_setup=function(n){if(o)try{i(null,n(c))}catch(n){i(n)}},n[t]=s;var a=r.createElement("script");a.src=e,a.async=!0,a.id="_uasdk",
  a.rel=t,r.head.appendChild(a)}(window,document,sdkUrl,'UA', options);

  if (!UA || (UA && typeof UA.then !== 'function')) {
    console.debug('Airship SDK Error: unable to load SDK on window')
  }
  // create a channel if one does not exist yet
  UA.then(function (sdk) {
    sdk.channel.id()
      .then(function (id) {
        if (id) return
        sdk.create()
          .catch(function (err) {
            console.debug('Airship SDK Error: could not create channel', err)
          })
      })
      .catch(function (err) {
        console.debug('Airship SDK Error: unable to instantiate SDK', err)
      })
  })
</script>

Choose a Trigger

 Important

When triggered, the above tag will register a channel for the visitor. This will be counted toward your Monthly Unique Visitors. You may wish to restrict triggering such that you only register channels when a user has become relevant for your use case.

  1. Click the Triggering pane, then click the row for All Pages. You can edit this later, if desired.
  2. Click the Save button, and you will be returned to the Workspace.
  3. Click the Submit button.
  4. Enter a Version name and description for this submission’s changes, then click the Publish button.
  5. Test to see if notifications are working, using the provided Sign up for notifications button code.
Example to provide a button to test GTM implementation
<!-- The following code provides a button to test your GTM implementation of Web Notifications -->

<h2>Web Push Test Page</h2>

<p id="register_p">
  <button id='register'>
    Sign up for notifications
  </button>
</p>

<script type="text/javascript">
  document.getElementById('register').addEventListener('click', ev => {
     UA.then(sdk => {
      sdk.register()
     })
   })
</script>