Swift 入门指南

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

1. 创建新项目

  1. 打开 Xcode。 请在 Google Cloud 控制台中创建新项目,
  2. 点击创建新的 Xcode 项目
  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 > 来源下,选择头文件
  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 */
    

如需在 build 设置中添加 Objective-C 桥接头文件,请执行以下操作:

  1. 在 Xcode 中,点击您的项目。
  2. 点击编辑器区域中的构建设置
    点击“Build Settings”(构建设置)
  3. 选择全部组合,然后搜索桥接
    搜索桥接
  4. 在包含 Objective-C 桥接头文件的行右侧列中,输入 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 为数字)输入为变量的值。
    使用 UA-47605289-5(将被删除)。
  8. 点击创建变量

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

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

c. 创建名为“屏幕浏览”的 GTM 代码

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击代码
  4. 点击新建
  5. 点击无标题代码,在屏幕视图中输入代码名称。
  6. 选择产品 Google Analytics
  7. 从列表中选择跟踪 ID
  8. 选择应用浏览作为跟踪类型
  9. 点击更多设置
  10. 点击要设置的字段
  11. 点击 + 添加字段
  12. 选择字段名称 screenName 及其值 Screen Name
  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. 创建一个名为 Event 的自定义事件变量。
  3. 创建一个标题为“Button Pressed”(按下按钮)的 GTM 代码。
  4. 创建按钮并添加代码以跟踪按下按钮的操作。

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

  1. 登录您的 Google 跟踪代码管理器账号。
  2. 选择一个移动容器。
  3. 在左侧导航栏中,点击变量
  4. 用户定义的变量下,点击新建
  5. 点击未命名的变量,输入事件操作的标题。
  6. 选择数据层变量作为变量类型。
  7. 输入 eventAction 作为数据层变量名称
  8. 点击设置默认值
  9. 输入默认值“未知事件”。
  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 将构建并运行应用:

已启动应用的屏幕截图