Test Page

Use Median's GTM Tag template to execute JavaScript Bridge commands directly from GTM tags instead of updating your website. Learn how to install your GTM container in your app and import Median's Tag template into your GTM workspace.

Prerequisites

1. A Median app using the JavaScript Bridge NPM package
   1. Create one here if needed
2. A GTM container ID. To create one:
   1. Create a Google Tag Manager Account and Web Container
      1. Make sure you select Web for the container platform
   2. Copy your container ID

Key Concepts

• GTM Container ID: Identifies your Google Tag Manager instance (Web Container). You can find it in the top-right area of your GTM container workspace.

• GTM Tag: A snippet of code that is executed on your website by GTM to avoid hardcoding it on the site.

• GTM Tag Template: A tag that can be imported into your GTM workspace to create preconfigured tags. Median's tag template injects the Median JavaScript Bridge into your app so that other tags can execute bridge commands.

• GTM Trigger: Rules that determine when a GTM tag is executed, such as a page view or button click.

Implementation Guide

Install your GTM container

1. On line 1 of the snippet below, replace ENTER-GTM-ID-HERE with your GTM container ID and copy the snippet to your clipboard

var gtmId = 'ENTER-GTM-ID-HERE';
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });

var checkReady = setInterval(function () {
  if (document.body) {
    clearInterval(checkReady);
    var f = document.getElementsByTagName('script')[0];
    var j = document.createElement('script');
    j.async = true;
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + gtmId;
    f.parentNode.insertBefore(j, f);
  }
}, 50);

2. In the App Studio:
   1. Head over to the Web Overrides page
   2. In the Custom JavaScript section (iOS and Android), paste the snippet from your clipboard. Make sure your GTM container ID is on line 1.
   3. Click Save
   4. Head over to the Build & Deploy page and rebuild your app

Import Median's Tag template in GTM

1. Download the template's .tpl file from this GitHub repository

2. In your Google Tag Manager Console:
   a. Head over to Templates
   b. Click New in the Tag Templates section

c. Click the three-dot menu icon in the top right corner of the screen
d. Click Import and upload the .tpl file
e. (Optional) Add a bridge version and userAgentValue in the template's fields. See the configuration fields on the Google Tag Manager page for more information.

3. Create a new tag from the template and set the trigger to fire on All Pages. This tag injects the Median JavaScript Bridge into your app so that other tags can use it.

4. Before publishing your container, you can use GTM's Preview mode to verify your configuration. Click Preview in your GTM workspace to launch the Tag Assistant, connect it to your web URL, and interact with your website to trigger the desired events. You can then check the Tag Assistant window to confirm that your tags are firing successfully.

5. Publish your GTM container

Build your own tags

You can create additional tags and triggers to call Bridge commands. For example, a tag can check median.auth.status to determine if a user's device supports Face ID or Touch ID. If it's supported, you can trigger biometric login prompts directly from GTM, without writing code into your website.

Reference documentation from Google

• About GTM
• GTM Tags
• GTM Triggers
• GTM Variables
• Preview and Debug

Setup Checklist

Use this checklist to ensure GTM is working correctly:

Troubleshooting