How to configure UTM parameters linking for Android in React Native apps — 1x07

Tasos Maroudas
Apr 23, 2018 · 4 min read

This story is part of a series where I am sharing my experiences on React Native: how I approached and worked with RN Components, APIs, external packages and all sorts of issues. I hope that this series of posts will prove useful to the React Native community and provide helpful insights.


So you are building a new React Native app and you plan to provide download links with many different ways (social media, email campaigns, blog posts etc) as part of your marketing process. Next, you want to evaluate which of these links worked better and converted to actual downloads. This what Google UTM parameters do and can help you with tracking and measuring.

Google UTM parameters are simply tags that you add to a URL. When someone clicks on a URL with UTM parameters, those tags are sent back to your Google Analytics account for tracking. When it comes to mobile apps, we are interested to receive these when a user installs our app.

This article will focus on how to configure your React Native app to achieve that. If you want to know more about UTM tags and how they work you can check out the How To Use UTM Parameters In Google Analytics 5 article of Kissmetrics blog and/or What are UTM codes article of launchdigitalmarketing.com website.

How to configure UTM parameters

Get a Google Analytics account

The first thing we need, is to have a Google Analytics account. Either create a new or use you existing one and create an app under this account in order to get an ID.

Install Google Analytics in your RN app

Since Google UTM codes tracking is part of Google Analytics and since we plan to track installations, we do need to install them over our application. The best way I have found to do this currently, is through react-native-google-analytics-bridge. It’s not an official Google package, but instead a community-built, React Native bridge to the Google Analytics libraries of both iOS and Android.

Installation is fairly simple but it since it is a bridged package, you will have to link with native binaries as well.

Android Manifest — The not so obvious configuration

And now, we need to make the application be able to receive installation information and dispatch the UTM info to Analytics. To achieve that, we add the following xml code inside the AndroidManifest.xml file and inside the application element:

To make this a bit more visibly clearer let’s see a real example:

I suggest to configure this only for release mode and not for development in order to track production statistics and not development as well. If you want to check how to create a separate AndroidManifest.xml file for production (release) mode, have a look at my previous article How to Remove unnecessary Android permissions from React Native apps.

Test your referral tracking configured setup

We are finished setting up the configuration, but in order to be sure it works, we need to run some tests the right way. Tests take place on 2 levels: command line terminal and Google Analytics reports.

Command line terminal

The easiest way is through adb tool. Just run in a terminal:

I.e.

Now after running this command and if you don’t see any error tracking should work fine. Final confirmation will be given through Google Analytics.

Google Analytics reporting

Now start monitoring your downloads through Acquisition -> Sources menu entries. Do your test downloads appear?

What do you think?

What do you think about UTM codes? Feel free to offer your perspective and ideas to the comments section below.

Do you have a specific subject that you would like me to cover? If I have worked on it, I will be more than happy to share my perspective.


If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

About me

Hi there, I’m Tasos; a software engineer that loves web and currently works a lot with React Native and React. I’m the co-founder of Coded Lines software agency where we undertake end-to-end mobile & web projects with emphasis to in-app marketing. If it sounds what you are looking for, please contact me here: tasos.maroudas@codedlines.com. Thanks for stopping by :)

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.

Tasos Maroudas

Written by

Front End / Mobile Engineer currently working with React Native, React & TypeScript 😃 Part time blogger. Co-Founder of Coded Lines Ltd https://codedlines.com

Building With React Native

Technical posts about React Native. What issues we encountered while developing Math Warriors Android game and how we solved them.