Tag Manager Integrations

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

Note

Tag manager integrations are not supported for Safari at this time.

Important

Google Tag Manager and Ensighten are supported today. Tealium support and documentation for each integration are coming soon.

Google Tag Manager

The Urban 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. Urban 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 = {}
  options.appKey = '<Your App Key>';
  options.token = '<Your token from sample.html>';
  // Reverse domain format is convention but not required for the websitePushId
  options.websitePushId = '<web.com.yoursite.yoursubdomain>';
  options.vapidPublicKey = atob('<base 64 encoded vapidPublicKey>');

  // Optional timestamp and signature for the tag
  // 86acbd31cd7c09cf30acb66d2fbedc91daa48b86:1548980517.16
  !function(n,t,c,e,u){function r(n){try{f=n(u)}catch(n){return h=n,void i(p,n)}i(s,f)}function i(n,t){for(var c=0;c<n.length;c++)d(n[c],t);
  }function o(n,t){return n&&(f?d(n,f):s.push(n)),t&&(h?d(t,h):p.push(t)),l}function a(n){return o(!1,n)}function d(t,c){
  n.setTimeout(function(){t(c)},0)}var f,h,s=[],p=[],l={then:o,catch:a,_setup:r};n[e]=l;var v=t.createElement("script");
  v.src=c,v.async=!0,v.id="_uasdk",v.rel=e,t.head.appendChild(v)}(window,document,'https://web-sdk.urbanairship.com/notify/v1/ua-sdk.min.js',
  'UA', options);

</script>

Choose a Trigger

  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 Notify -->

<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', function(){
     UA.then(function(sdk) {
      sdk.register()
     })
   });
</script>