Swift 入门指南

本指南介绍了如何使用 Swift 创建和实现 iOS 应用,以便通过 Google 跟踪代码管理器 (GTM) 跟踪屏幕打开和按钮按下事件。

1. 创建新项目

  1. 打开 Xcode。 请在 Google Cloud 控制台中创建新项目,
  2. 点击 Create a new Xcode project。
  3. 选择 Single View Application。 选择单视图应用
  4. 点击下一步。
  5. 为项目命名,并为其选择其他选项。您的项目名称和应用名称将与商品名称相同。
    输入商品名称和其他选项
  6. 点击下一步。
  7. 选择项目位置(目录)。
  8. 点击创建。

2. 安装 Google 跟踪代码管理器依赖项

  1. 退出 Xcode。
  2. 在终端中,运行以下命令以安装 Cocoapods:
    $ sudo gem install cocoapods
  3. 切换到您的项目目录。
  4. 运行以下命令以创建名为 Podfile 的文件:
    $ pod init
  5. 在 Podfile 中,取消注释 use_frameworks! 并将 pod 'GoogleTagManager' 添加到目标:
  6. # Uncomment this line if you're using Swift
    use_frameworks!
    
    target 'GtmSwiftTutorial' do
      pod 'GoogleTagManager'
    end
  7. 运行以下命令,将 Google 跟踪代码管理器 (GTM) 依赖项下载并安装到您的项目中:
    $ pod install

    此命令还会创建工作区 GtmSwiftTutorial.xcworkspace。 从现在起,请使用此工作区来开发 GtmSwiftTutorial 应用。

3. 为 Objective-C 库添加桥接头文件

如需创建桥接头文件:

  1. 打开 Xcode。
  2. 依次点击 File > New > File。
  3. 在 iOS > Source 下,选择 头文件。
  4. 点击下一步。
  5. 输入头文件名 BridgingHeader.h。
    创建桥接头文件
  6. 点击创建。
  7. 将以下 import 语句添加到头文件中:
    #ifndef BridgingHeader_h
    #define BridgingHeader_h
    
    #import <GoogleTagManager/TAGManager.h>
    #import <GoogleTagManager/TAGContainer.h>
    #import <GoogleTagManager/TAGContainerOpener.h>
    #import <GoogleTagManager/TAGDataLayer.h>
    #import <GoogleTagManager/TAGLogger.h>
    
    #endif /* BridgingHeader_h */

在构建设置中添加 Objective-C 桥接标头:

  1. 在 Xcode 中,点击您的项目。
  2. 点击编辑器区域中的 Build Settings。
    点击“Build Settings”(构建设置)
  3. 选择全部和组合,然后搜索 bridging。
    搜索桥接
  4. 在包含 Objective-C Bridging Header 的行的右侧列中,输入 BridgingHeader.h。
    将 BridgingHeader.h 添加为 Objective-C 桥接头文件

4. 向项目中添加默认容器

在向项目中添加默认容器之前,请先下载移动容器二进制文件:

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 点击菜单栏中的版本。
  4. 针对所选容器版本,依次点击操作 > 下载。
  5. 已下载文件的名称是容器 ID,例如 GTM-PT3L9Z。

如需向项目中添加默认容器二进制文件,请执行以下操作:

  1. 打开 Xcode。
  2. 点击 Dock 上的 Finder 图标。
  3. 点击 Downoloads 文件夹。
  4. 将 Downloads 文件夹中的容器二进制文件拖放到 Xcode 项目的根文件夹中。
  1. 在 Xcode 中,打开 AppDelegate.swift 文件。
  2. 让 AppDelegate 类扩展 TAGContainerOpenerNotifier 类:
    import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
      // ...
    }

    扩展该类后,您会收到 Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' 错误。以下步骤将修复此错误。

  3. 将以下函数添加到 AppDelegate 类定义的底部:
    func containerAvailable(container: TAGContainer!) {
      container.refresh()
    }
  4. 在 application 函数中,在 return true 语句之前添加以下代码:
    let GTM = TAGManager.instance()
    GTM.logger.setLogLevel(kTAGLoggerLogLevelVerbose)
    
    TAGContainerOpener.openContainerWithId("GTM-PT3L9Z",  // change the container ID "GTM-PT3L9Z" to yours
        tagManager: GTM, openType: kTAGOpenTypePreferFresh,
        timeout: nil,
        notifier: self)

6. 跟踪屏幕打开事件

如需跟踪屏幕打开事件,请执行以下操作:

  1. 创建一个变量来存储跟踪 ID。
  2. 创建一个名为 screenName 的数据层变量。
  3. 创建一个名为屏幕浏览的 GTM 代码。
  4. 添加屏幕跟踪代码。

a. 创建用于存储跟踪 ID 的变量

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击变量。
  4. 在用户定义的变量下,点击新建。
  5. 点击未命名变量,输入变量名称跟踪 ID。
  6. 选择常量作为变量类型。
  7. 输入跟踪 ID(格式为 UA-XXXXXXXX-X,其中 X 是数字)作为变量的值。
  8. 点击创建变量。

b. 创建名为 screenName 的数据层变量

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击变量。
  4. 在用户定义的变量下,点击新建。
  5. 点击未命名的变量,输入标题屏幕名称。
  6. 选择数据层变量作为变量类型。
  7. 输入 screenName 作为数据层变量名。
  8. 点击设置默认值。
  9. 输入默认值 unknown screen。
  10. 点击创建变量。

c. 创建名为“Screen View”的 GTM 代码

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击代码。
  4. 点击新建。
  5. 点击未命名的代码,输入代码名称屏幕浏览。
  6. 选择产品 Google Analytics 。
  7. 从列表中选择跟踪 ID。
  8. 选择应用浏览作为跟踪类型。
  9. 点击更多设置。
  10. 点击要设置的字段。
  11. 点击 + 添加字段。
  12. 选择字段名称 screenName 及其值屏幕名称。
  13. 点击继续。
  14. 在触发条件下,选择任何事件。
  15. 点击创建代码。

d. 添加屏幕跟踪代码

  1. 在 Xcode 中打开 ViewController.swift 文件。
  2. 在 ViewController 类中定义一个名为 dataLayer 的变量:
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. 在 viewDidLoad() 函数中,将 OpenScreen 事件推送到数据层:
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

ViewController 类的定义如下所示:

import UIKit

class ViewController: UIViewController {
  var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer

  override func viewDidLoad() {
    super.viewDidLoad()
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that cant be recreated
  }
}

7. 跟踪按钮按下事件

如需跟踪按钮按下事件,请执行以下操作:

  1. 创建一个名为 eventAction 的数据层变量。
  2. 创建一个名为事件的自定义事件变量。
  3. 创建一个名为按钮按下的 GTM 代码。
  4. 创建一个按钮,并添加代码来跟踪该按钮是否被按下。

a. 创建名为 eventAction 的数据层变量

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击变量。
  4. 在用户定义的变量下,点击新建。
  5. 点击未命名的变量,输入标题事件操作。
  6. 选择数据层变量作为变量类型。
  7. 输入 eventAction 作为数据层变量名。
  8. 点击设置默认值。
  9. 输入默认值 unknown event。
  10. 点击创建变量。

b. 创建名为“Event”的自定义事件变量

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击变量。
  4. 在用户定义的变量下,点击新建。
  5. 点击无标题变量,输入变量名称事件。
  6. 选择自定义事件作为变量类型。
  7. 点击创建变量。

c. 创建一个名为“Button Pressed”的 GTM 代码

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击代码。
  4. 点击新建。
  5. 点击未命名的代码,输入代码名称按钮按下。
  6. 选择产品 Google Analytics 。
  7. 从列表中选择跟踪 ID。
  8. 选择事件作为跟踪类型。
  9. 选择事件类别。
  10. 选择事件操作。
  11. 点击继续。
  12. 在触发条件下,选择任何事件。
  13. 点击创建代码。

d. 创建一个按钮并添加代码,以跟踪该按钮是否被按下

  1. 打开您的 Xcode 项目。
  2. 打开 Main.storyboard。
  3. 点击 Xcode 工具栏中最右上角的按钮,打开实用工具区域(右侧边栏)。 分镜脚本和实用工具区域
  4. 在实用程序区域底部,
    用于打开对象库的蓝色按钮

    点击显示对象库按钮(蓝色按钮):

    对象库弹窗
  5. 在搜索框中输入 button。
    对象库中的按钮
  6. 将 Button 拖动到故事板,并将其放置在左上角。
    将按钮拖放到分镜脚本
  7. 点击 Xcode 工具栏中的助理编辑器按钮 Google 助理编辑器按钮。
  8. 按住 Ctrl 键,拖动该按钮并将其放到 ViewController 类定义的底部。
    将该按钮拖放到 ViewController 类定义中
  9. 在对话框中,选择 Action 连接,输入函数名称 buttonPressed,然后点击 Connect。
    创建用于处理按钮按下事件的代码

    这会将以下函数添加到 ViewController 类定义的末尾:

    @IBAction func buttonPressed(sender: AnyObject) {
    }

    每次按下按钮时,系统都会执行该函数。

  10. 在 buttonPressed 函数中,添加以下代码以将 ButtonPressed 事件推送到数据层:
    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }

8. 构建并运行应用

在 Xcode 中,依次点击 Product > Run。Xcode 将构建并运行该应用:

已启动应用的屏幕截图