Google Tag Manager: How to implement Apple App Store iOS App Banners and App Touch Icons

This post will be most valuable for Apple Platform Developers.

When you as a developer want to implement Marketing Tools provided by Apple Developers portal, This are the most common one that you want to use market your apps using this common codes.

Promoting Apps with Smart App Banners

Reference Link

Code Implementation Using HTML:

Below is the same code that Apple shared on their Apple Developer Portal.

<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">

Code Implementation Using Google Tag Manager:

But when implementing same code with Google Tag Manager you have use JavaScript to implement it through Google Tag Manager.

Step 01: Sign in to Google Tag Manager > Accounts > Container > Tags > New > Set Tag Name > Under Tag Configuration Choose ‘Custom HTML’ > And Paste Below Code inside Configuration

<script>
  var metaTag = document.createElement('meta');
  metaTag.name = "apple-itunes-app";
  metaTag.content = "app-id=1041431196";
  document.head.appendChild(metaTag);
</script>

Note: Change App-ID with your app-id that you want to implement.

Step 02: Now Under Triggering > Choose All Pages

Now Publish The Changes

Apple Touch Icons for Website

Reference Link

Apple has native code that can be used once user adds your website on their Apple iPhone or iPad home screen. That will always open in Safari browser or preferred browser but look like native app on device’s Home Screen app grid.

Apple Gives You Two way to Add Apple Touch Icons

Single Image Implementation:

<link rel="apple-touch-icon" href="/custom_icon.png">

Multiple Image Implementation for Each Device:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

You can see above implementation is very simple.

But with Google Tag Manager I would suggest you implement single image with similar code that was implemented for Apple App banners.

Step 01: Sign in to Google Tag Manager > Accounts > Container > Tags > New > Set Tag Name > Under Tag Configuration Choose ‘Custom HTML’ > And Paste Below Code inside Configuration

<script>
  var linkTag = document.createElement('link');
  linkTag.rel = "apple-touch-icon";
  linkTag.href = "https://your-domain.com/apple-touch-icon.png";
  document.head.appendChild(linkTag);
</script>

Note: Change ‘href’ with your website url where your image is located on server for the image that you want to implement.

Step 02: Now Under Triggering > Choose All Pages

Now Publish The Changes

Now, check everything. Check on your Apple iPhone is everything successfully implemented.

Thanks & Regards
Mandar Apte