# Tag Manager Integrations for the Web SDK

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](https://www.google.com/analytics/tag-manager/).

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

1. [Airship Setup](https://www.airship.com/docs/developer/sdk-integration/web/getting-started/#airship-setup)
1. [Add push-worker.js to your root directory](https://www.airship.com/docs/developer/sdk-integration/web/getting-started/#place-service-worker)

> **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](https://developers.google.com/web/fundamentals/primers/service-workers/),
> 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](https://tagmanager.google.com), select your container,
   click **Admin** in the navigational header, then click **Install Google Tag
   Manager**.
1. 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.
1. Enter "Web Push" in the title field, then click the *Tag Configuration*
   pane.
1. 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**


```html
<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](https://www.airship.com/docs/reference/billing/#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.
1. Click the **Save** button, and you will be returned to the Workspace.
1. Click the **Submit** button.
1. Enter a Version name and description for this submission's changes, then
   click the **Publish** button.
1. 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**


```html
<!-- 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>
```