iOS - Displaying smart ad banners on your website

Tealium Employee

Prerequisites

 

  • You must have utag.sync.js enabled in your publish settings and deployed synchronously in the <head> section of your web page. If you're not sure what this means, contact your account manager.

  • You must have the "edit templates" permission in order to make this configuration change

Summary

 

This guide will show you how to deploy a "Smart App Banner" on your website using Tealium IQ. For reference, please see Apple's documentation on this topic:

 

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/P...

 

The purpose of this technology, is to display a banner on your web page to prompt the user to install your app. This is handled automatically by the mobile Safari web browser, and just requires very minimal setup in IQ.

 

The resulting banner will look something like this:

2016-02-16_1409.png

 

Steps

 

1. Log into Tealium IQ, and edit the utag.sync.js template (User Menu > Edit Templates > uTag Sync)

 

2. Paste the following code at the bottom of the file, replacing the "XXXXXXXXX" placeholder with your 9 digit app ID from the Apple App Store:

 

 

  (function(){
    var elem = document.createElement("meta");elem.name="apple-itunes-app";elem.content="app-id=XXXXXXXXX";document.head.appendChild(elem);
  }());

 

Example uTag.sync.js config

 

 

3. Click "Save Profile Template".

 

4. Save and publish your profile.

 

There are no further requirements; after you have successfully published your profile, you will automatically see an app install banner in the mobile Safari browser.

 

Advanced users: If you wish, you can amend the above code snippet to add the other (optional) meta tag elements that Apple supports, which are referenced in the documentation linked above. These are: affiliate-data and app-argument.

 

Caveats: There is an equivalent system for Android apps, but it is not possible to implement this via IQ. This is because Google requires you to host a "manifest.json" file on your web server, containing the relevant config, which is not something that Tealium can do. For reference, here are the docs provided by Google if you wish to read more:

 

Docs:
 
Examples:

 

Check out our new Swift integration library for iOS, macOS, tvOS and watchOS: https://github.com/Tealium/tealium-swift with updated
documentation https://community.tealiumiq.com/t5/Swift/tkb-p/swift.