I\u2019ve been meaning to write about Google Tag Manager<\/a> for mobile apps<\/strong> for such a long time. Finally, I have some great use cases to share, as well as some useful examples for implementing GTM for iOS<\/a>. That\u2019s right, this is an iOS<\/strong> guide, and, to be more specific, geared towards a successful Swift<\/strong> implementation.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you didn\u2019t know, Swift<\/a> is a relatively new programming language, developed by Apple for iOS and OS X programming. It\u2019s got some nice synergies with existing Objective-C implementations, which means you can either gradually migrate to Swift, or just start writing new apps with it instantly.<\/p>\n In this article, we\u2019ll walk through a simple Swift implementation of Google Tag Manager and Google Analytics. I\u2019ll very briefly review the GTM SDK in the Comments chapter, but this is a how-to article, not a why-should-I writeup. I\u2019m going to be expanding on this theme of mobile GTM in future texts, so this will stand out as a starting point for understanding how the SDK plays together with your application.<\/p>\n Many thanks to my colleague, Sampsa Kuronen, for exposing me to the dark arts of Xcode and Swift.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n This guide is written with the assumption that you\u2019re using the latest version of Xcode<\/a> as your IDE of choice. It\u2019s not the best IDE (by far) out there, but it has been created with iOS and OS X programming in mind, meaning there are certain benefits from using it.<\/p>\n Another, quite obvious, assumption is that you have access to your project source. You will be adding new files<\/strong>, importing headers<\/strong> and modifying project source code<\/strong>. It\u2019s a good idea to run everything you\u2019re doing by your team, as you don\u2019t want to merge unverified source code into your project.<\/p>\n Here\u2019s something you might not yet fully realize:<\/p>\n GTM for mobile apps is not the same<\/em> as GTM for the web!<\/strong><\/p>\n The level of freedom you have when working with the latter simply does not exist in the mobile app world. We\u2019re working with projects<\/strong> and applications<\/strong>, so you need to have a solid understanding of how to do software development in a proper and consistent manner, abiding to any design patterns you have found successful.<\/p>\n To get things rolling, let\u2019s setup Google Tag Manager first. In this tutorial, we\u2019ll create a simple Screen View Tag to test the implementation with. In later chapters, we\u2019ll go over the event payload as well, but it\u2019s up to you to create the Tag for it.<\/p>\n In GTM, create a new Container under some Account. Choose iOS<\/strong> as the container type, and give it a descriptive name.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Next, you\u2019ll be whisked to the Container Overview, and you\u2019ll see a small popup saying your container is ready to use. You can close that.<\/p>\n As you can see, it looks pretty much like GTM for web.<\/p>\n Next, go to Tags<\/strong>, and click New<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Wow, that\u2019s way fewer<\/strong> Tags than in GTM for web. Let\u2019s hope we\u2019ll get more soon! Also, make note that there is no Custom HTML Tag<\/strong>. It makes perfect sense, since you\u2019re not working with HTML, but I thought I should point it out nevertheless.<\/p>\n We\u2019ll be creating a simple Google Analytics<\/strong> Tag , which sends an App View<\/strong> (also known as a Screen View) to Google Analytics when the first View<\/strong> of the app loads (don\u2019t worry, it will all be clear soon). So, create the Google Analytics Tag, and add the Tracking ID<\/strong>.<\/p>\n Make sure that App View<\/strong> is selected as the Track Type, and expand More Settings<\/strong> -> Fields to Set<\/strong>.<\/p>\n Click <\/p>\n <\/a><\/p>\n<\/div>\n We need to create a Variable, which picks up the desired Screen Name from the Data Layer (Screen Name<\/em> is to an app what Page<\/em> is to a website). So, after marvelling the list of Variables that\u2019s completely different<\/a> from GTM for web, choose Data Layer Variable<\/strong>.<\/p>\n Give it a descriptive name, e.g. DLV – screenName<\/strong>, and set the Variable Name field to screenName<\/strong>. Save the new Variable.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Next, in the Tag screen, click Continue<\/strong> and proceed to the Fire On<\/strong> step.<\/p>\n In this step, click Custom<\/strong>, as you want to create a new Trigger for the Tag. So, in the popup that appears, click New<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Give the Trigger a descriptive name, e.g. Event – screenView<\/strong>, and set the condition as in the screenshot below.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Save the Trigger, and then click \u201cCreate Tag\u201d to, well, create the Tag.<\/p>\n Phew, almost done here! We\u2019ll go with just this one Tag, as this is a simple setup guide.<\/p>\n Next, go to the Versions<\/strong> page of your GTM container, and click open the Actions<\/strong> menu for the only container version you\u2019ll see (the initial draft). Click Publish<\/strong> and follow the prompts to publish your container.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n There, GTM is almost<\/strong> ready, hungry to process the Data Layer commands you dispatch from your app.<\/p>\n Just one more thing to do. You\u2019ll need to download the container version binary<\/strong>, as GTM for apps is a bit different in how it processes containers. Basically, you can\u2019t trust that the app will have access to a container downloaded over the network, so you\u2019ll always want to provide a local container binary file for the app as well. Read more about this in chapter 5.1.<\/p>\n So, click open the Actions<\/strong> menu for the Live<\/strong> container version, and choose Download. Make sure you download it somewhere you can easily find it from.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n That\u2019s it! We\u2019re done with the GTM setup. All that\u2019s left is the minor task of upgrading your App to use the Google Tag Manager (and Google Analytics) SDK!<\/p>\n Congratulate yourself with a power bar and some coffee.<\/p>\n I\u2019ll wait. Maybe get some coffee myself, and boogie silently to your profound success in setting up GTM!<\/p>\n I won\u2019t linger here, as I\u2019m actually assuming you already have an Xcode<\/a> project and workspace to work with. If you need something to get started with, take a look at this tutorial<\/a> by Ray Wenderlich. If you pay close attention to the screenshots in the article you\u2019re reading right now, you might notice that I\u2019m actually using Ray\u2019s Tip Calculator as the basis for this article.<\/p>\n If you only have a project setup and no workspace, keep reading. When you add the required dependencies to your project using Cocoapods (see below), a workspace is automatically generated for you.<\/p>\n In order for Google Tag Manager to work with your app, you will need to download the SDKs for both Google Tag Manager and Google Analytics. To do that we\u2019ll use Cocoapods<\/a>, which is an open-source dependency manager for your iOS and OS X projects. As you might have guessed, both Google Analytics and Google Tag Manager SDKs are also distributed as Pods.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n After you\u2019ve installed Cocoapods (if you need help, check e.g. this guide<\/a>), you need to go to your workspace root directory (the one with your .xcodeproj and .xcworkspace files), and type:<\/p>\n This command initializes a simple Podfile for your project.<\/p>\n Open Podfile with your favorite editor.<\/p>\n Between the lines Once you\u2019ve done this, you can run the command <\/p>\n <\/a><\/p>\n<\/div>\n Now that you\u2019ve installed the Pods, the next thing you need to do is import them into your project.<\/p>\n It\u2019s not exactly straightforward, as Google Tag Manager source code is in Objective-C, which means you can\u2019t just directly import it to your Swift project. Instead, you need to use something called a Bridging Header<\/strong>.<\/p>\n A bridging header<\/em> is key to creating projects where the codebase includes code from multiple languages – Objective-C and Swift in this case. Basically, you use a bridging header file to expose Objective-C structures in your Swift files, so that you can, for example, work with the GTM SDK (which is Objective-C at the time of writing) without having to worry about clashes and conflicts that occur when working across languages.<\/p>\n First of all, if you installed the Pods correctly, you should see them in your Project navigator<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Now, to create the bridging header file, go to File<\/strong> -> New<\/strong> -> File<\/strong>. Under iOS<\/strong> \/ Source<\/strong>, you\u2019ll find Header File<\/strong>, so select that and click Next<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Give the file a name: <\/p>\n <\/a><\/p>\n<\/div>\n You should see the file open in your editor. Add the following import statements to the file, and then save it:<\/p>\n These headers include all the necessary Google Tag Manager headers, as well as all the Google Analytics SDK headers.<\/p>\n Finally, you need to include the bridging header file in your build settings.<\/p>\n Click your project (the root level node) in your Project navigator. In the settings screen that opens, choose the tag labelled Build Settings<\/strong>, and scroll all the way down to Swift Compiler – Code Generation<\/strong>.<\/p>\n Edit the field next to Objective-C Bridging Header<\/strong>, and type in the file name of the bridging header file you just created.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Now, build your project and make sure everything checks out right.<\/p>\n Next up, setting up Google Tag Manager in the project!<\/p>\n My, how far we\u2019ve come!<\/p>\n If you look at how the developer guide kicks off<\/a>, you\u2019ll notice the rather limited capabilities of Google Tag Manager for mobile. For now, at least. Basically, you can dispatch Google Analytics hits and run custom functions. Also, you can change configuration values.<\/p>\n In this tutorial, we\u2019ll focus on the first use case, so we\u2019ll setup a simple interface for tracking screen views and events to Google Analytics.<\/p>\n Before we do anything, however, we\u2019ll need to add the container version binary<\/strong> to the project. This is rather important, as even though GTM can load a \u201cfresh\u201d container over the network, some of the interactions on the site might actually need to be tracked before<\/em> the asynchronous operation of loading the container is complete. In this case, GTM can fall back to the local container binary, also referred to as the default<\/em> container.<\/p>\n NOTE!<\/strong> This also means that you should try to keep the binary in the project as up-to-date as possible, so that batches which use the binary would be as similar as possible to those that use the fresh container. So make it a habit that every time you publish a new container version, you download the version binary, and add it to the project (delete the old binary first).<\/p>\n We\u2019ll cover all this very soon, don\u2019t worry.<\/p>\n In Xcode, simply drag-and-drop the container binary file to your project. A window should open, where you need to make sure that you add the file to your target (so check the relevant box).<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you don\u2019t have a Supporting Files<\/strong> group under your project, now\u2019s a good time to create one. Right-click on the container binary, and choose New Group from Selection<\/strong>. Name the group Supporting Files. Your navigator should look like this:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you already do have a Supporting Files group, just move the binary into that folder.<\/p>\n Next up, source code and stuff<\/em>.<\/p>\n The AppDelegate.swift<\/strong> file is where you control states of your app. For example, when the app loads, AppDelegate, well, delegates<\/em> operations to different parts of your application. Similarly, when your phone rings and interrupts the application, you\u2019d control this process through AppDelegate.<\/p>\n Since Google Tag Manager is something you want to load as the application loads, you\u2019ll need to make changes to AppDelegate.swift. So, proceed to open the file in your editor.<\/p>\n We want to modify the function which is called once the application is loaded. Aptly, there\u2019s one that looks like this:<\/p>\n That\u2019s the callback we\u2019ll open the container in. Here, \u201copen the container\u201d means we\u2019ll make it available for dispatching hits using the available interfaces. On top of that, having a container available is a prerequisite for interacting with the Add the following lines into the function:<\/p>\n Line-by-line, here\u2019s what happens. First, you initialize an immutable variable named Next, you use the This next bit is a bit more complicated.<\/p>\n When you download the container binary into the Supporting Files of your project, it\u2019s called a default container<\/em>. This is what GTM uses until a saved container is found, or if this saved container is not fresh (> 12 hours old), a new, fresh one is loaded over the network. This is why it\u2019s imperative that the saved binary is usable. The first screen view of the app might well be ready to dispatch before a non-default container has loaded, which means you want the default container to be as accurate as possible.<\/p>\n When choosing the Both revert to the default container if a saved container couldn\u2019t be loaded or if there was a network error.<\/p>\n Next, you can enable logging. I\u2019ve commented if DEBUG<\/strong> because it might be a good idea to verbosely log only if you\u2019re debugging the app, since it produces a lot<\/em> of console output, which is unnecessary overhead in the live app.<\/p>\n You might have noticed that I skipped over the The Because you\u2019re invoking ![\"Google](\"https:\/\/www.simoahava.com\/images\/2015\/10\/swift-xcode.jpg#ZgotmplZ\")
<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nGetting started<\/h2>\n
1. Google Tag Manager setup<\/h2>\n
![\"Google](\"https:\/\/www.simoahava.com\/images\/2015\/10\/create-container.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2015\/10\/tags-new.jpg#ZgotmplZ\")
<\/p>\n+ Add Field<\/code>, and add screenName<\/strong> as the Field Name. In Value, click the \u201cVariable\u201d button and choose New Variable\u2026<\/strong>.<\/p>\n![\"new-variable\"\/](\"https:\/\/www.simoahava.com\/images\/2015\/10\/new-variable.jpg#ZgotmplZ\")
<\/p>\n![\"data](\"https:\/\/www.simoahava.com\/images\/2015\/10\/data-layer-variable-screenName.jpg#ZgotmplZ\")
<\/p>\n![\"Create](\"https:\/\/www.simoahava.com\/images\/2015\/10\/new-trigger.jpg#ZgotmplZ\")
<\/p>\n![\"Custom](\"https:\/\/www.simoahava.com\/images\/2015\/10\/custom-trigger.jpg#ZgotmplZ\")
<\/p>\n![\"Publish](\"https:\/\/www.simoahava.com\/images\/2015\/10\/publish-container.jpg#ZgotmplZ\")
<\/p>\n![\"Download](\"https:\/\/www.simoahava.com\/images\/2015\/10\/gtm-download-container.jpg#ZgotmplZ\")
<\/p>\n(2. Create a new Xcode workspace)<\/h2>\n
3. Download the SDKs using Cocoapods<\/h2>\n
![\"Cocoapods\"\/](\"https:\/\/www.simoahava.com\/images\/2015\/10\/cocoapods.jpg#ZgotmplZ\")
<\/p>\npod init<\/code><\/p>\ntarget 'YourProject' do<\/code> and end<\/code>, you need to add the Pod references you want to download and install for your project, so add the following construct into the file:<\/p>\ntarget 'YourProject'<\/span> do<\/span>\n pod 'GoogleTagManager'<\/span>\n pod 'Google\/Analytics'<\/span>\nend<\/code><\/pre>\n<\/div>\npod install<\/code>, which will automatically install and import all the files to your Xcode project. Neat, huh?<\/p>\n![\"Install](\"https:\/\/www.simoahava.com\/images\/2015\/10\/pod-install.jpg#ZgotmplZ\")
<\/p>\n4. Create and edit the Bridging Header file<\/h2>\n
![\"Project](\"https:\/\/www.simoahava.com\/images\/2015\/10\/tree-view.jpg#ZgotmplZ\")
<\/p>\n![\"Create](\"https:\/\/www.simoahava.com\/images\/2015\/10\/bridging-header-create.jpg#ZgotmplZ\")
<\/p>\nyourProjectName-Bridging-Header.h<\/code>, and save it in your project root. Remember to choose a target for the file, so that the header file is properly associated with your project.<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2015\/10\/new-header.jpg#ZgotmplZ\")
<\/p>\n#import<\/span> \"TAGManager.h\"<\/span>\n#import<\/span> \"TAGContainer.h\"<\/span>\n#import<\/span> \"TAGContainerOpener.h\"<\/span>\n#import<\/span> \"TAGDataLayer.h\"<\/span>\n#import<\/span> \"TAGLogger.h\"<\/span>\n#import<\/span> Google\/Analytics<\/span>.h<\/span>><\/code><\/pre>\n<\/div>\n![\"build-settings\"\/](\"https:\/\/www.simoahava.com\/images\/2015\/10\/build-settings.jpg#ZgotmplZ\")
<\/p>\n5. Load Google Tag Manager in the project<\/h2>\n
5.1. Add container binary to project<\/h3>\n
![\"Add](\"https:\/\/www.simoahava.com\/images\/2015\/10\/add-file.jpg#ZgotmplZ\")
<\/p>\n![\"Supporting](\"https:\/\/www.simoahava.com\/images\/2015\/10\/supporting-files.jpg#ZgotmplZ\")
<\/p>\n5.2. Modify AppDelegate<\/h3>\n
func<\/span> application<\/span>(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject<\/span>]?) -> Bool<\/span> {\n \/\/ Override point for customization after application launch.<\/span>\n \/\/ ...<\/span>\n return<\/span> true<\/span>\n}<\/code><\/pre>\n<\/div>\nTAGDataLayer<\/code> interface. This is a slight departure, again, for how things work with GTM for web, where you could create a dataLayer<\/code> object before the container loading began.<\/p>\nlet<\/span> tagManager<\/span> = TAGManager.instance()\nTAGContainerOpener.openContainerWithId(\n \"GTM-XXXXXX\"<\/span>,\n tagManager: tagManager,\n openType: kTAGOpenTypePreferFresh,\n timeout: nil<\/span>,\n notifier: self<\/span>)\n\/\/ if DEBUG<\/span>\ntagManager.logger.setLogLevel(kTAGLoggerLogLevelVerbose)<\/code><\/pre>\n<\/div>\ntagManager<\/code> as a singleton instance of the TAGManager<\/code> class.<\/p>\nTAGContainerOpener<\/code> interface to signal that you want to fetch a container to work with. Remember to change the \u201cGTM-XXXXXX\u201d<\/strong> to whatever the container ID you\u2019re using is.<\/p>\nopenType<\/code> value, I suggest you use either kTAGOpenTypePreferNonDefault<\/code> or kTAGOpenTypePreferFresh<\/code>.<\/p>\nkTAGOpenTypePreferNonDefault<\/code> attempts to load a saved container (i.e. one that was previously loaded over the network), regardless of whether it\u2019s stale or not. Stale means it\u2019s over 12 hours old. This means that you\u2019ll have a container to work with sooner. If the container is stale, Google Tag Manager starts an asynchronous request for a fresh container over the network.<\/p>\nkTAGOpenTypePreferFresh<\/code> only loads a saved container if it\u2019s fresh. If it isn\u2019t, it loads a new, fresh container over the network.<\/p>\nnotifier: self<\/code> key-value pair in the TAGContainerOpener<\/code> call. That\u2019s because it requires a bit more attention.<\/p>\nnotifier<\/code> parameter is basically a setting, where I instruct GTM to notify my app when a container becomes available. Once a container is available, our methods and functions can create an instance of the AppDelegate<\/code> class to access the loaded container. You can use container<\/code> to update your app\u2019s configuration values<\/a> through GTM, for example.<\/p>\nself<\/code> as the parameter value, it means that the class you\u2019re currently in (AppDelegate<\/code>) needs to implement the TAGContainerNotifier<\/code> protocol, as