Log Branch Events Using Google Tag Manager

Overview

Use case: Log Branch Events using Google Tag Manager (GTM), Firebase and Branch libraries. This is done using GTM custom functions.

Prerequisite: Branch SDK must be in iOS and Android App.

🚧

Warning

This has not been tested intensively (with different use cases)!

Setting up Custom Tags on Android

🚧

Prerequisite

Please ensure that you have the Branch SDK installed on Android.

1. Import your GTM container
2. Implement a class that extends com.google.android.gms.tagmanager.CustomTagProvider.
   Please see an example below :

import android.support.annotation.Keep;
    import java.util.Map;
    import branch
    @Keep
    public class HighScoreProvider implements com.google.android.gms.tagmanager.CustomTagProvider {
      @Override
      ...
    }

3. If using ProGuard, make sure that the class names and methods are not obfuscated. Use the Keep annotation to specify this.
4. Within this custom class, use the following function below
   public abstract void execute (Map<String, Object> parameters)
5. Within this function, read the parameters passed by GTM within the "execute" function and log a Branch standard /custom event. Please ensure you import the Branch library.

@Keep
    public class TagProviderImpl implements CustomTagProvider {
    ...

        @Keep
        public void execute(Map<String, Object> variables) {
            BranchEvent event = new BranchEvent("View Event");
            for (String key: variables.keySet()) {
                event.addCustomDataProperty(key, variables.get(key).toString());
            }
            event.logEvent(context);
        }
    }

Setting up custom tags on iOS

🚧

Prerequisite

Please ensure that you have the Branch SDK installed on iOS.

1. Import your GTM container
2. Ensure that you have a bridging header included (especially for codebase using both Swift and Objective-C)
   1. Open Xcode.
   2. Click File > New > File.
   3. Under iOS > Source, select Header File.
   4. Click Next.
   5. Enter the header file name BridgingHeader.h.

    6. Click Create.

3. Add Objective-C bridging header on build settings
   1. In Xcode, click your project.

2. Click Build Settings in the editor area.
3. Select All and Combined and search for bridging.
4. In the right column of the row containing Objective-C Bridging Header, enter `BridgingHeader.h`.

4. Implement a custom class e.g CustomEventTagFunction

import Foundation
import GoogleTagManager

@objectivec(CustomEventTagFunction)
final class CustomEventTagFunction : NSObject, TAGCustomFunction {
 ...
}

5. Within this custom class, use the following function below:
   @objectivec func execute(withParameters parameters: [AnyHashable : Any]!) -> NSObject! { ...}
6. Within this function, read the parameters passed by GTM within the "execute" function and log a Branch standard or custom event. Please ensure you import the Branch library. This is an example:

import Foundation
    import GoogleTagManager
    import Branch

    @objectivec(CustomEventTagFunction)
    final class CustomEventTagFunction : NSObject, TAGCustomFunction {
        @objectivec func execute(withParameters parameters: [AnyHashable : Any]!) -> NSObject! {
            print("********************* parameters: \(String(describing: parameters))")

            let event_Name = parameters["event_name"] as! String
            let event = BranchEvent.customEvent(withName: event_Name)

            parameters.keys.forEach { key in
                let a = parameters[key] as! String
                event.customData[key] = a
                print("*", a)
            }
            event.logEvent()
            return nil
        }
    }

Trigger events via Firebase Events

1. Ensure that you have events triggered via GTM.

Here is an example:
dataLayer.push(["event": "branch_event", "screenName": "Home Screen"])

Setting up GTM configurations

1. Set up triggers for your event.
   1. Add filters for when this trigger is fired.

2. Add relevant event variables of what to add in.
   1. Create a new variable
   2. Select ‘Event Parameter’
   3. Work with your Branch Sales engineer or Solutions engineer to determine what variable to create.

3. Create a new Tag under the Tags section and provide a name.
   1. Click on Tag Configuration, and under Tag type, select Function Call.
   2. Provide the created classpath under the Class path section
      1. iOS: Look at this section
      2. Android: Look at this section
   3. Expand the “Add Argument” section and provide the key as "event_name" with the event name macro. Add in other keys which you need.
4. Click on Triggering section and choose your appropriate trigger on which this Tag should fire.

5. Please ensure that you update the container on both iOS and Android respectively.