Setting up Web Notify and adding snippet of js to website with GTM

Follow

Gerry,

Google Tag Manager can be used to add the Web Notify Javascript snippet to webpages.

To do so, you would want to create a new tag of type "Custom HTML". The trigger can be anything, but it will be inserted into the page when the trigger occurs.

For the HTML code, paste in the code snippet you received from the Web Notify setup and Save Changes.

Then, you should be able to save and publish those changes.

If you receive an error, you may need to change the snippet from "UA.then(sdk => {" to "UA.then(function(sdk) {"

Lastly, you'll need to place the push-worker.js under the root of the server.

Once you've done that, you're free to add registration buttons in your code to register for push. You may have something like this in your snippet:

This should generate a register button to allow you to register for push. 

That should be all you need to set this up in GTM!

Hi Michael,

I am trying to do the same thing with no luck. Can you elaborate where the registration button code goes in relation with the snippet? I am using Google Tag Manager.

Thank you,

Patrick

Patrick,

Sure!

The register button would go inside your snippet.html file that you receive when you initially set up Web Notify as a platform within your account.

So, your code may look something like

<script type="text/javascript">
!function(n,t,c,e,u){function r(n){try{f=n(u)}catch(t){return h=t,void i(p,t)}i(s,f)}function i(n,t){for(var c=0;c<n.length;c++)d(n[c],t);
}function o(n,t){return h?(d(t,h),l):f?(d(n,f),l):(n&&s.push(n),t&&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', // This value can be changed to use a custom variable name.
 {
 appKey: 'YOUR-APP-KEY',
 vapidPublicKey: 'WEB-PUSH-KEY-FROM-UA',
 token: 'BEARERTOKEN-FROM-UA',

...
</script>

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

<script>

document.getElementById('register').addEventListener('click', function(){

//  UA.then(sdk => {

   UA.then(function(sdk) {

    sdk.register()

   })

 });

</script>

Hi Michael,

Per your instructions, I created the script with the reg code and pushed through Google Tag manager as Custom HTML. I also have the Push Worker  file on the root of the domain. However, when I refresh the page, nothing happens. In preview mode in GTM, I can see the Urban Custom HTML tag  firing. I am really trying to figure this out. Is there another step?  I can show you my code if you want. Thanks for your help!

Patrick

Michael,

Sorry - disregard previous message. I now see the button - it was hidden by the GTM preview mode! Anyway, what is the best way to auto launch the notification - maybe 10 seconds or so? 

Thanks,

-p

Patrick,

No worries!

For the "notification" are you referring to the push notification, or the prompt to allow or disallow notifications when registering for push?

 I am referring to the prompt to allow or disallow notifications when registering for push..

Thanks,

-p

Patrick,

Ah!

There are a few different methods to present that to the user. I wouldn't necessarily recommend setting it to a timer.

Instead, you may try displaying that prompt to the user once they've performed a specific action in the page (Clicked on a certain link, read an article, etc.).

Of course, this all depends on your use case. If a timer is more appropriate, consider popping a smaller interstitial window on the page that explains the benefits of registering for web notification. A soft ask, if you will, before you give them the system prompt. This could be if they are browsing the page after 30 seconds to a minute, or view a certain subsection of the page.

Michael,

Do you have any templates we can use to review options? or point us to a resource where we can research further?

Thanks.

-p

Hi Michael,

What I am trying to get in place here is the initial browser based 'Allow' or 'Block' window that opts people into accepting push notifications in the future. So the usual.. 'this website wants to: Send notifications Allow / Block' type of browser optin.

It's not a button or a specific interstitial that I want to add to the website.

I would have thought this to be standard from any website push notification platform.

How is this achieved using urban airship, the docs or web notify have no info on this

Gerry,

This is the standard behavior.

In our documentation, we state that:

"The dialog is presented when the page invokes the sdk.register function. As a best practice, we discourage calling this function on page load, before the user has had a chance to assess the potential usefulness of notifications from your site. See Registration UI for a simple, sample UI element that registers a user."

Are you not able to see that prompt after enabling the registration call?

Hi Michael,

So just for the sake of testing, if I include the following with my GTM script it should load the browser prompt.

UA.then(function(sdk) {
sdk.register()
})

I know it wouldn't be ideal to call this instantly on page load but just for testing purposes is that how to call the prompt?

Sorry for all the questions but I'm finding the docs hard to follow for the simple testing of web notify

Gerry,

Yes, that is how you would call the prompt.

Michael,

Could you clarify the auto load script. I would like to do some testing too - is this the script for auto load? I can't seem to get it to work...

<script>

UA.then(function(sdk) {
sdk.register()
})

</script>

Thanks,

-p

Patrick,

That script is for registering calling the opt-in prompt and enabling the Urban Airship SDK. Is that the function you were looking for, or something else?

I was referring to auto loading the browser prompt upon page load -

Patrick,

Then yes, that would be the script for auto-loading the browser prompt. Specifically it is just this call:

UA.then(function(sdk) {
sdk.register()
})

that starts that prompt. You'll probably want to call that somewhere in the page when the page loads for the first time. 

If it's not working, can you check to see if there are any web console logs that might indicate what the problem is?

Hi,

So this is the code I am using in GTM to load on the page - but still not auto loading. Disregard the XXXXX - just took those out. Any ideas?

Thanks,

-p

<script type="text/javascript">
// 86acbd31cd7c09cf30acb66d2fbedc91daa48b86:1510858100.53
!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', {
appKey: 'XXXXXXXXXX',
token: 'XXXXXXXXXX',
vapidPublicKey: 'XXXXXXXXXX='
});
</script>
<script>
UA.then(function(sdk) {
sdk.register()
})
</script>

Patrick,

That code should load the script. When you run that linked to a button, does it work then? Or, does it not work even with the button?

Yes - the button does fire the prompt - but auto loading does not work. 

Patrick,

Let's try something like this:

<script type="text/javascript">
document.addEventListener('onload',function(){
    UA.then(function(sdk) {
         sdk.register()
    })
});
</script>

Unfortunately, still not working. I even placed the code directly in the page to test.

Patrick,

Perhaps try calling just sdk.register() in that onload function.