Adding Tag Manager to Flutter app.
It’s the forth article of the series to learn the integration process of Google Analytics with Flutter app for both Android and IOS platform concerning different flavors.
In this article, we will learn to link Tag Manager to our Flutter app for different flavors.
Why do we need Tag manager?
Tag manager provides a gateway between your client and Google Analytics. Which helps in filtering out important data in our analytics report.
So, let’s start:
In the previous article, we learned how to add Google Analytics to our flutter project using Firebase for different flavors. Now let’s move forward to integrate the tag manager in our project.
Step 1: Set up Google Tag manager.
Step 1.1: To integrate Tag manager first go to Google Tag Manager Site and login with the same Email-Id you have used before in firebase. Now click on Create Account.
Fill your details and select Android as Target platform.
Step 1.2: Select your container in the container list. In the next screen, create tags, triggers and after reviewing them click on the submit button. To learn more about Tags and Triggers you can follow this link.
Step 1.3: Now, enter a version name, description and click on the Publish button and publish the container.
After it has been published, download the JSON file. You can also access these JSON files in the Version Tab of the console, just click on the latest version and download it.
If you are working in a single environment and not using flavor then skip the next step.
Step 1.4: Great, you have downloaded the JSON file for one of your flavors say prod, now create another android container for your second flavor say dev and download its JSON file.
For each flavor you need one JSON file. So as we have 2 flavors Prod and Dev we need two JSON files.
Step 2: Now let’s start android set-up.
As per official documents you need to put this JSON file inside the android/app/assets/containers folder, but as we are working with flavors we add this file in separate folders.
For that go to your android/app/src folder and create two new folders named dev and prod (name of your flavors). Now create sub folders “assets/containers” in the both dev and prod folder and add downloaded JSON files into their respective folder.
Add this dependency to your (app) build.gradle file.
implementation’com.google.android.gms:play-services-tagmanager:11.0.4'
That’s all, android set-up is complete. Good job.
For more information on android set-Up use below link.
Google documentation : https://developers.google.com/tag-manager/android/v5
Step 3: Now let’s move to IOS set up.
Step 3.1: Before we begin you need to create two more containers selecting IOS as target Platform in your Tag manager account. In the end you will have one container for each app.
Now download the IOS container JSON files and move to the flutter project.
Go to your IOS folder if you can see a file called Podfile then skip the next step.
Step 3.2: Add the Google Tag manager Cocoapod to your project:
1. In a terminal, run the following command to install Cocoapods,
2. $ sudo gem install cocoapods
3. Change to your project directory.
4. Run the following command to create a file named Podfile
5. $ pod init
Step 3.3: In Podfile, add the below dependency:
pod ‘GoogleTagManager’
Run the below command to download and install Google Tag manager dependencies to your project:
$ pod install
Till now you have added Tag manager dependency for IOS.
Step 3.4: Now to add the JSON files in our project create a folder in Finder called “container” and create two subfolders inside it, name them as your flavors name as for me it was dev and prod.
Now move your JSON file to their respective folders and rename both of them as GTM-XXXXXXX.json. (P.S. There are 7 X’s)
Now open your project in Xcode and drag the container folder under the Runner folder.
Make sure Create folder references option is selected. Click Finish.
Note: The above step is important because even if you copy this folder using file manager to our project. Xcode will not recognize this folder, you have to drag this folder inside Runner within Xcode.
Step 3.5: Now as what we did with firebase .plist files in the pervious article, we are going to do the same for these JSON files. Yes, we will write a shell script to pick the right JSON file at the time of compilation.
So inside your Xcode move to the Build Phases section. Create a new Run script phase. And named it say “Copy Google Tag Manager file to correct place”.
Now, add below code to this script.
environment=”default”
# Regex to extract the scheme name from the Build Configuration
# We have named our Build Configurations as Debug-stage, Debug-prod etc.
# Here, stage and prod are the scheme names. This kind of naming is required by Flutter for flavors to work.
# We are using the $CONFIGURATION variable available in the XCode build environment to extract
# the environment (or flavor)
# For eg.
# If CONFIGURATION=”Debug-prod”, then environment will get set to “prod”.
if [[ $CONFIGURATION =~ -([^-]*)$ ]]; then
environment=${BASH_REMATCH[1]}
fi
echo $environment
# Name and path of the resource we’re copying
GTM_FILE_NAME=GTM-XXXXXXX.json
GTM_INFO_FILE=${PROJECT_DIR}/container/${environment}/${GTM_FILE_NAME}
# Make sure GTM-XXXXXXX.json exists
echo “Looking for ${GTM_FILE_NAME} in ${GTM_INFO_FILE}”
if [ ! -f $GTM_INFO_FILE ]
then
echo “No GTM-XXXXXXX.json found. Please ensure it’s in the proper directory.”
exit 1
fi
# Get a reference to the destination location for the GTM-XXXXXXX.json
# This is the default location where Firebase init code expects to find GTM-XXXXXXX.json file
#GTM_DESTINATION=${BUILT_PRODUCTS_DIR}/${PRODUCT_NAME}.app
GTM_DESTINATION=${PROJECT_DIR}/container/${GTM_FILE_NAME}
echo “Will copy ${GTM_FILE_NAME} to final destination: ${GTM_DESTINATION}”
# Copy over the prod GoogleService-Info.plist for Release builds
cp “${GTM_INFO_FILE}” “${GTM_DESTINATION}”
That’s it, you have added Google Tag manager to your project for multiple flavors.
For more information on integrating IOS tag manager use below link.
Google documentation: https://developers.google.com/tag-manager/ios/v5
If you find difficulties in Xcode build phase setting, then go through this article where they have explained it properly.
Now all the Analytics events will be triggered first at Tag manager and then in Google Analytics, you can either restrict, modify or create more events through Tag manager console and modify Google Analytics report without releasing new builds on Play store or App store.
