Setup Google Tag Manager With Red Bee Android/IOS App¶

Prerequisites¶

Make sure you have the following items on this list setup and working before starting this how to guide.

Google Tag Manager Account. Read more on setup here, in the container configuration, select the target platform ios or android.
Firebase account with configured android and ios project. Find the guide on how to set it up here. Firebase analytics supports Google Analytics 4
Google Tag Manager, properly set in Customer portal
Google Tag Manager Config Tag (Set in Google Tag Manager container)

Troubleshooting:¶

If you have created tags in Google Tag Manager, make sure to publish your changes for them to take effect. 1.1 If you want instant feedback that everything is properly set up, you can use the preview mode inside Google Tag Manager.
It could take up to 48h for your data to be exposed in Firebase Analytics after being sent from Google Tag Manager. 2.1 Under Configure => Debug View, you can test that your data is received from Google Tag Manager preview mode.

Data Layer google analytics 4 is supported by firebase

The Data Layer¶

The Data Layer acts as a middle hand between the RedBee app and Google Tag Manager. It connects to the correct container using a Google Tag Manager container ID and once the ID is set in the customer portal, the RedBee app will be connected to that container. When a specified event occurs in the app; It could be a click, scroll or custom event, data is being pushed from the app to the data layer. Whenever there is a change to the data layer, the data layer will forward its data to Google Tag Manager. From Google tag manager you can set up triggers to act on keys in the data layer and by doing so, collect data to your data stream in your Firebase Analytics account.

Automatically collected events with Firebase Analytics enhanced measurement¶

When using Firebase Analytics with enhanced measurement enabled, there are a multitude of events that will be collected automatically by Google Tag Manager. For example they include outbound clicks (i.e. external link in herobanner items or menu), link clicks, scroll and scroll depth.

See a full list of the automatically collected events here

Events implemented by RedBee¶

There are, however, events that are not as easily collected to cover the entire user journey in the context of the RedBee platform and they include:

Sign up / Log in
Component item click / Menu item click
CTA purchase flow → CTA selected product offering → abort / success
CTA watch now (will be tracked as play page view otherwise)
CTA share
CTA favourite
CTA follow tag
CTA add to calendar
Component item click

The RedBee app will capture these events by pushing data objects to the data layer when the user interacts with your app. By doing so, you can capture this data using a custom event tag in Google Tag Manager. The following custom keys (event) below can be used to trigger custom tags. The data object will always contain the event and userLocation information.

Pushes the following object to the data layer once the user successfully logs in.

{
  event: "login";
  userLocation: string;
  method: "oauth" | "firebase" | "userAccount";
}

assetNavigate¶

Pushes the following object to the data layer once the user clicks on either a hero banner- /categories- /carousel- /grid- or list card. attn!: there will only be one item in the array of items.

  {
    event: "assetNavigate";
    userLocation: string;
    itemListId: string; //ID of the component
    itemListName: string; //Name of the component
    itemId: string; //ID of the Asset
    itemName: string; //Name of the Asset
    type: "heroBanner" | "categoriesCard" | "carouselItem" | "gridItem" | "listItem";
  }

assetInteraction¶

Pushes the following object to the data layer once the user follows, unfollows, adds asset to calendar or add an asset to favorites

{
  event: "assetInteraction";
  userLocation: string;
  action: "watch" |
    "favorite" |
    "unFavorite" |
    "followTag" |
    "unFollowTag" |
    "addToCalendar";
  itemId: string; //ID of either asset or tag;
}

Pushes the following object to the data layer once the user clicks on a share button. attn!: This only track the intent of sharing, it does not know if the user actually shared the link.

  {
    event: "share";
    userLocation: string;
    method: "native" | "twitter" | "facebook";
    contentType: "asset";
    itemId: string; //ID of the Asset
  }

Connect your Firebase Analytics to your Google Tag Manager¶

You need to set up a configuration tag in Google Tag Manager containing your measurementId from Firebase Analytics, it should be setup to fire on all page loads. This will connect your Google Tag Manager ID with Firebase Analytics.

Data Layer

Setting up data layer variables¶

We would recommend you to set up the following Data Variables to more easily set up tags.

Go to your tag manager workspace.
Click on Variables
Click on New
Choose a name for your variable in the top left corner where it says "Untitled Variable". We prefixed it with dlv - but that is up to you.
Click on Variable Configuration.
Select Event Parameter
Select Custom Parameter
Type the data variable name from the table below that corresponds with the value you want to capture. i.e action

When you are done, it should look something like this: Data Layer

Setting up custom events¶

Go to your tag manager workspace.
Click on Triggers
Click on New
Choose a name for your trigger in the top left corner where it says "Untitled Trigger". We prefixed it with Custom - but that is up to you.
Click on Trigger Configuration.
Select Custom Event and then Some Events
Select a previously created variable in the first field
Select the method of comparison in the second field
Enter the value we send for the key in the event from the app
Keep the default "This trigger fires on All Custom Events".

When you are done, it should look something like this: Data Layer

Setting up a tag¶

When the above steps are done, you should quite easily be able to setup the custom tags you want to fire when any of the custom event names are present in the data layer.

Go to your tag manager workspace.
Click on Tags
Click New
Choose a name for your tag in the top left corner where it says "Untitled Tag". We prefixed it with tag - but that is up to you.
Click on Tag Configuration
Choose Google Analytics (Firebase)
Type the Event name you want to fire on, see the table below for available event names. Make sure it matches the typing. i.e assetNavigate
Click on Event Parameters 8.1 Click on Add Row 8.2 Type the suggested tag variable name from the table below (or a name that makes sense to you) 8.3 Click on the +-sign next to the value input 8.4 Select the correct data layer variable from the table below that corresponds to the event you are capturing.
Click on Triggering
Select the Custom Event that matches what you are wanting to capture.
Click Save and your Tag is ready to be triggered.
Make sure that you publish your changes by clicking submit in the top right corner (after your tag has been saved).

When it is done, it should look something like this: Data Layer

Attn!: You need to set up 'Event Parameters' for every value you want sent to Firebase Analytics when a tag is triggered. If not, no data will be sent regardless if the tag fires or not.

See the table below to find out what data layer variables you should set up to track the actions of your choice.

Custom data¶

We are matching the suggested format from Google. They do not however always make sense in the contexts of our platform. You can look at the table below for details on what data is to be expected under the different keys in the data layer. When firing a tag, you need to set up the event parameters in Google Tag Manager

Event name	Object key	Object value	Datalayer variable	Suggested tag parameter	Description
`login`	`method`	`firebase`, `oauth`, `userAccount`	`method`	`method`	Authentication
`login`	`userLocation`	`country code`	`userLocation`	`user_location`	Only possible to track user account signup

`assetNavigate`	`itemListId`	`string`	`itemListId`	`item_list_id`	Id of component rendering the asset card / herobanner
`assetNavigate`	`itemListName`	`string`	`itemListName`	`item_list_name`	Title of component rendering the asset card / herobanner
`assetNavigate`	`items`	`[]`	`items`	`items`	A list of objects containg details regarding the asset
`assetNavigate`	`items[0].item_id`	`string` , `no asset id`	`items.0.itemId`	`item_id`	Asset id or Herobanner id
`assetNavigate`	`items[0].item_name`	`string` , `no asset name`	`items.0.itemName`	`item_name`	Asset name or Herobanner name
`assetNavigate`	`items[0].type`	`heroBanner`, `categoriesCard`,`carouselItem`,`gridItem`,`listItem`	`items.0.itemType`	`item_type`	The kind of asset that was clicked
`assetNavigate`	`userLocation`	`country code`	`userLocation`	`user_location`	Only possible to track user account signup

`assetInteraction`	`action`	`watch`, `favorite`, `unFavorite`, `followTag`, `unFollowTag` , `addToCalendar`	`action`	`action`	How did you interact with the asset
`assetInteraction`	`itemId`	`string`	`itemId`	`item_id`	The id could be a tag id or an asset id
`assetInteraction`	`userLocation`	`country code`	`userLocation`	`user_location`	Only possible to track user account signup

`share`	`method`	`native`, `twitter`, `facebook`	`method`	`method`	The plattform that the user intents to share to, by clicking the share button. It doesn't actually mean that the share was made
`share`	`content`	`asset`	`content`	`content`	The type the user is planning to share. For now, only assets are availble
`share`	`item_id`	`string`	`itemId`	`item_id`	Id of the asset the user is planning to share.
`share`	`userLocation`	`country code`	`userLocation`	`user_location`	Only possible to track user account signup