How to Implement FH Analytics in Hybrid App

To let FirstHive track the user behavior on your Hybrid App, its tracking code needs to be placed in the index file to load for every screen.

Sample Tag Manager Code:

<!-- FH Tag Manager --><script type="text/javascript">

var _mtm = _mtm || [];

_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});

var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];

g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://analytics.firsthive.com/js/container_clltfUIkS.js'; s.parentNode.insertBefore(g,s);

var _paq = _paq || [];

</script>

<!-- End FH Tag Manager -->

How to Implement a FirstHive Data Layer?

The Data Layer is a central piece within FirstHive Tag Manager as it ensures maximum flexibility.

For example, you may wish to push a value from an eCommerce order into the data layer, allowing someone who configures a container (tag manager) to access this value as part of a tag or trigger configuration. It also allows you to trigger an event which in turn can fire a certain tag.

This way you can integrate for example any e-commerce, CRM, marketing suite, and more into the tag manager.

Setting a Variable

You can push one or multiple values at once to the data layer by calling the _mtm.push method:

Triggering an Event

Triggering an event within the container works similarly to setting a variable. Simply specify a property named event as part of the parameters:

Configuration in Matomo Tag Manager

To access this value as a variable in Matomo Tag Manager, create a new variable of type Data Layer and configure it as Data Layer Variable Name for example orderTotal. You can now assign this variable to any trigger or tag.

Assuming you created a variable “Order Total” for the orderTotal data layer variable, you could even configure a condition along with the trigger to for example only trigger when Order Total is greater than 100.

Configuration in FirstHive Tag Manager

To create a trigger that is listening to this event in Matomo Tag Manager, create a new trigger of type Custom Event and configure as Event Name the valuepurchase`. You can now assign this trigger to a tag to ensure a tag will be fired or blocked whenever this event is being triggered from your Hybrid App.

Assuming you created a variable “Order Total” for the orderTotal data layer variable, you could even configure a condition along with the trigger to for example only trigger when Order Total is greater than 100.

How to Read from the Google Data Layer?

If you have already implemented Google Analytics and would like FirstHive to read from the existing google data layer. Please follow the below steps.

Place the additional code (marked in grey) after the FirstHive tag manager tag. This code reads the google data layer and pushes it into FirstHive data layer. This can then be used to configure events in FirstHive Tag manager.

<!-- CDP Tag Manager --><script type="text/javascript">var _mtm = _mtm || [];

_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});

var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];

g.type='text/javascript'; g.async=true; g.defer=true;       g.src=https://analytics.firsthive.com/js/container_23904AO.js'; s.parentNode.insertBefore(g,s);

var _paq = _paq || [];

</script>

<script>

var eventify = function(arr, callback) {

arr.push = function(e) {

Array.prototype.push.call(arr, e);

callback(arr);

};

};

eventify(dataLayer, function(updatedArr) {

var obj = dataLayer[dataLayer.length-1];

_mtm.push(obj);

});

</script>

<!-- End CDP Tag Manager -->

eventData.event = eventName; 

_mtm.push(eventData);

var keys = Object.keys(eventData);

var fhKey = keys[0];

var eventDataFH = {'app_action' : fhKey};

eventDataFH.event = eventName; 

_mtm.push(eventDataFH);

<!-- CDP Tag Manager --><script type="text/javascript">var _mtm = _mtm || [];

_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});

var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];

g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://analytics.firsthive.com/js/container_GpMvEPV3.js'; s.parentNode.insertBefore(g,s);

var _paq = _paq || [];

</script>

<script>

digitalData.event=digitalData.channel;

var obj = digitalData;

console.log(digitalData);

var _mtm = _mtm || [];

mtm.push(obj);

console.log(_mtm);

</script>

<!-- End CDP Tag Manager -->

Click here to know how to set up tags in FirstHive Tag manager.