Deep link (Universal Link) + Google Ads for re-engagement

Last Updated: 2021-02-15

What you'll build

Universal link is an official iOS deep link to seamlessly connect to content in your app or on your website. With universal links, you can always give users the most integrated mobile experience, even when your app isn't installed on their device. You can also use universal link to create an app campaign to re-engage your users and allow them to accomplish their goals efficiently.

In this codelab you will learn how to:

  1. Implement the Universal link in iOS app to connect the app and the website.
  2. Create a new re-engagement app campaign using Universal link.

For the first part, you can use the sample app code provided in this codelab to create an universal link. If you want to continue with the second part, please prepare your own published app with a conversion tracking tool (e.g., Google Analytics for Firebase) implemented.

What you'll learn

  • How to implement Universal link
  • How to launch a Google Ads App Campaigns for Engagement using universal link

What you'll need

  • Xcode 12.0 or later (compatible with macOS Big Sur 11 or later)
  • Website to connect with the app
  • A physical device with iOS 14.0 or later to run your app
  • Apple Developer Account
  • Basic knowledge of SwiftUI 2.0
  • Your own published app (for the second part)
  • Google Ads Account (for the second part)

Clone the GitHub repository or download the zip file by clicking the link below. After downloading the sample code, go ahead and open the MyTodoApp.xcodeproj.

  • Option1) Terminal commands to clone and open the project:
$ git clone https://github.com/SuhyunLee/universal_link_codelab_sample.git
$ cd universal_link_codelab_sample
$ open MyTodoApp.xcworkspace
  • Option2) Download the ZIP file and open the project:

Click the link below to download the source as a ZIP file and unpack. Open the root folder universal_link_codelab_sample and double click the MyTodoApp.xcodeproj file to open the Xcode project.

Download source code

Quick overview of the sample app

This sample app is a simple ToDo app. It is developed by SwiftUI2.0. To explore the app, select the type of the simulator and run the app.

373d3056480297e6.png

4c478810b184b7f0.png 7cfc589da2436bc3.png

In this section, you will configure some requirement settings to implement the universal link. Open MyTodoApp.xcodeproj for the configuration.

General setting

In the General tab, make sure that the lowest iOS version supported in your app is set to 14.1. This is because some of the SwiftUI 2.0 codes are only available in iOS 14.0 or newer.

b5695d08d8243b31.png

Add your Apple Developer Account

In the Signing & Capabilities tab, add your Apple Developer Account.

53d902be27cf8de4.png

Add the Associated Domains Entitlement to Your App

To create a two-way association between the app and your website and specify the URLs that the app handles, add associated domains in the Signing & Capabilities tab.

6d4ceba707bc0487.png

In the Domains, add "applinks://" + "your website domain".

a088526b66623492.png

To associate your website with the app, you'll need to have the associated domain file on the website. To add the associated domain file to your website:

  1. Create a hidden folder .well-known in the root directory of your website.
  2. Inside the .well-known folder, create an empty file named apple-app-site-association (without an extension)
  3. Open apple-app-site-association file, copy and paste the JSON code below.

apple-app-site-association

{
  "applinks": {
    "apps": [],
    "details": [{
      "appID": "your_team_id.com.example.myapp.MyTodoApp",
      "paths": ["/*"]
    }]
  }
}

The appID is <Your Team ID>.<Bundle Identifier>.

You can find your Team ID in the apple developer account website.

fcb19b690d7dfa32.png

Make sure apple-app-site-association has an application/json content type header. If apple-app-site-association is created properly, you will be able to see the file contents with the following weburl:

  • https://<Your website domain>/.well-known/apple-app-site-association
  • https://<Your website domain>/apple-app-site-association

1a6503f895b92d3f.png

  1. Open MyTodoAppApp.swift and ToDoItemListView.swift to add code.
  2. Add codes that handles the following logic (red lines in the code):
  • If the last path component of the url equals to "add", then open the Add Todo view(AddToDoItemView) in the app.
  • If it doesn't match, open the main viewToDoItemListView) of the app.
  1. Re-build your app after adding the codes.

MyTodoAppApp.swift

import SwiftUI

@main
struct MyTodoAppApp: App {
    let persistenceController = PersistenceController.shared
    @State private var presentAddTodoView: Bool = false

    var body: some Scene {
        WindowGroup {
            ToDoItemListView(presentAddTodoView: $presentAddTodoView)
                .onOpenURL(perform: { url in
                    if ("add" == url.lastPathComponent) {
                    presentAddTodoView = true}})
                .environment(\.managedObjectContext, persistenceController.container.viewContext)
        }
    }
}

ToDoItemListView.swift

import SwiftUI
import CoreData

struct ToDoItemListView: View {
    @Environment(\.managedObjectContext) private var viewContext
    @FetchRequest(entity: ToDo.entity(), sortDescriptors: [NSSortDescriptor(keyPath: \ToDo.id, ascending: false)]) var todolist: FetchedResults<ToDo>
    
    @State private var showAddTodoView: Bool = false
    @Binding var presentAddTodoView: Bool
    
    var body: some View {
        NavigationView{
            if presentAddTodoView {
                NavigationLink(destination: AddToDoItemView(), isActive: $presentAddTodoView){
                    EmptyView()
                }
            }else{
                List{
                    ForEach(self.todolist, id: \.self) { todo in
                        Text(todo.content)
                    }
                    .onDelete { indexSet in
                        for index in indexSet {
                            viewContext.delete(todolist[index])
                        }
                        do {
                            try viewContext.save()
                        }catch{
                            print(error.localizedDescription)
                        }
                    }
                }
                .navigationBarTitle("My Todo", displayMode: .inline)
                .navigationBarItems(
                    leading: EditButton(),
                    trailing:
                    Button(action: {
                        self.showAddTodoView.toggle()
                    }){
                        Image(systemName: "plus")
                    }
                    .sheet(isPresented: $showAddTodoView){
                        AddToDoItemView().environment(\.managedObjectContext, self.viewContext)
                    }
                )
            }
        }
    }
}

struct ToDoItemListView_Previews: PreviewProvider {
    static var previews: some View {
        ToDoItemListView(presentAddTodoView: .constant(true)).environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
    }
}

Now we will test the universal link with both simulator and physical device.

Test with simulator

  1. Select the type of the simulator you want to test and run your app.
  2. Navigate to the home screen and launch the contact app.
  3. Add a new contact with two urls:
  4. https://<Your website domain>
  5. https://<Your website domain>/add
  6. Click url "https://<Your website domain>", and check if app launches with the main view (ToDoItemListView)
  7. Click url "https://<Your website domain>", and check if app launches with the add view (AddToDoItemView)
  8. Navigate back to the home screen, delete the "MyTodoApp"
  9. Open the contact app again and click each urls again. Now, since the app is removed from the simulator, the web browser will be launched and the link will direct you to the website.

Test with physical device

  1. Connect your physical iOS device to your computer.
  2. Change the test device setting to your iOS device and run your app.

a97bc97a77929d8b.png

  1. Write the universal links in the Note or new contact and check if it opens the app properly.
  2. Delete the app and click the links again and check if it opens the website properly.

Congratulations! You have successfully implemented the universal link.

If you want to create an engagement Google Ads campaign with the universal link, please proceed to the next steps.

Now, let's open and login to Google Ads.

Import conversions

  1. Go to Google Ads and log in.
  2. Go to Tools & Settings → Measurement → Conversions
  3. Hit the (+) for adding a new conversion action.

7e20daec391dc383.png

  1. Choose Google Analytics 4 properties (Firebase) to import events from firebase, or choose third-party app analytics to import events from App Attribution Program Partners.

e57269f928f5ab3e.png

  1. Choose conversions you want to import and click "Import and continue"

15d66c11d74f710e.png

Create remarketing audience lists of app users

  1. Go to Tools & Settings → Audience Manager
  2. Hit the (+) and select App Users

21fc6009a381a3f2.png

  1. Fill in the audience setting based on the type of app users you'd like to include in this audience

ede1415ea9f7e457.png

  1. Go to Campaign tab and click "+Campaign → App Promotion → Universal App→ App Engagement"

1adcaacb4d2f51f9.png

  1. Enter Campaign name and choose location (Do not overfilter with location settings)
  2. Select the language of the campaign
  3. Set the right budget of at least 50x your tCPA
  4. Choose the Right Events and Bid Accordingly 1420bc03bb193540.png
  5. Click save and continue.
  6. In the App ad> App URL, input the universal link you created from the previous steps.

69bd8384c6cd0626.png

  1. Select the audience you want to target and finish campaign settings. bce259c37c7bb132.png

Congratulations, you've successfully implemented a universal link in your app and created a Google Ads engagement campaign with this link. This will help you re-engage your app users.

You've learned

  • How to implement Universal link
  • How to launch a Google Ads App Campaigns for Engagement using universal link