Hybrid Apps

Subscribe to our monthly newsletter to get the latest updates in your inbox

Native apps continually prove to be an important platform for users to interact with brands. While many apps are built natively (e.g. through writing Objective-C/Swift or Java), there are other platforms that allow apps to be built non-natively. These apps are written with HTML, CSS, and JavaScript and are later automatically converted to native code. Coredova and React Native are platforms that behave this way. These platforms—known as hybrid apps, are popular because a company can hire one development team to launch apps on two separate platforms—write code once instead of twice. It's important to know how to track hybrid applications to help better answer business questions. However, there are no SDKs designed for this purpose. This blog post will describe the most important points for installing Google Tag Manager (GTM) for these hybrid app environments. The hybrid app platforms differ from websites in a couple ways that notably affect the GTM implementation. These differences are below:
  • These platforms use file protocol, not HTTP/HTTPS.
  • These platforms do not use cookies. Values must be saved elsewhere.
We must address each of these issues if we want to utilize GTM for these platforms.

File Protocol:

These hybrid app platforms use file protocol instead of HTTP/HTTPS. There are several steps we need to perform to make sure GTM will work under this protocol. The first is modifying the GTM installation snippets. We want to remove HTTPS and utilize relative protocol instead.

HTTPS Protocol:

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>

<!-- End Google Tag Manager -->
 

File Protocol:

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>

<!-- End Google Tag Manager -->
  Notice, we’ve removed the "http:" from the snippet. When relative protocol "//" is used, the platform will automatically determine which protocol to use. Next, we need to configure the tags in GTM to not check for the HTTP/HTTPS protocol. To do this, we'll modify "checkProtocolTask" in field to set. This field must be set to an empty Custom JavaScript variable that returns an empty function. This tells GTM to not check for HTTP/HTTPS protocol—allowing file protocol to run. This change must be implemented for all Universal Analytics tags.

No Cookies:

The next issue to be addressed is the lack of cookies with which to store values. This is a huge problem because the GA client id is typically stored in cookies. With no cookies, each hit will have a new client id—resulting in a newly generated user per hit. We don't want this behavior as it's undesirable. To avoid it, we'll tell each tag in GTM not to check cookies for the client id. We'll set the field "storage" in field to set—to none. Next, we want to be able to find and persist the GA client id without cookies. We'll utilize the fields: hitCallback and clientId. The hitCallback field should be set to a Custom JavaScript variable that returns a function. This function will attempt to set the clientId in localStorage (or another storage feature) and pull the client id from the GA object that the GTM snippet loads. The field, clientId, will be set to a Custom JavaScript variable that also returns a function. This function will check localStorage for the clientId and return it if it exists. These changes must be implemented for all Universal Analytics tags. If the above changes have been made to the GTM implementation we can run GTM in hybrid environments, allowing us to better understand how users on these platforms behave and convert in Google Analytics.