Swift 入門指南

本指南說明如何在 Swift 建立及實作 iOS 應用程式 使用 Google 代碼追蹤畫面開啟和按鈕按下的事件 經理 (GTM)。

1. 建立新專案

1. 開啟 Xcode。
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' 加入目標中：

# Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. 執行下列指令，下載並安裝 Google 代碼管理工具 (GTM) 套用至專案的依附元件：

   $ pod install

   這個指令也會建立工作空間 GtmSwiftTutorial.xcworkspace。 從現在起，使用此工作空間開發 GtmSwiftTutorial 應用程式。

3. 為 Objective-C 程式庫新增橋接標頭

如何建立橋接標頭檔案：

1. 開啟 Xcode。
2. 按一下「檔案」>新增 >檔案。
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 */

如何在建構設定中新增 Objective-C 橋接標頭：

1. 在 Xcode 中按一下您的專案。
2. 按一下編輯器區域的「Build Settings」。
   
3. 選取「全部」和「合併」，然後搜尋「橋接」。
   
4. 在含有 Objective-C 橋接標頭的資料列的右側欄中， 輸入 BridgingHeader.h。
   

4. 在專案中新增預設容器

在專案中新增預設容器前，請先下載 行動容器二進位檔：

1. 登入您的 Google 代碼管理工具帳戶。
2. 請選取行動容器。
3. 按一下選單列中的「版本」。
4. 按一下「動作」>在所選容器上下載 版本。
下載的檔案名稱為容器 ID 例如 GTM-PT3L9Z。

如何在專案中新增預設容器二進位檔：

1. 開啟 Xcode。
2. 按一下 Dock 上的「Finder」圖示。
3. 按一下 Downoloads 資料夾。
4. 將容器二進位檔檔案拖曳到 Downloads 資料夾中，然後拖放 新增至 Xcode 專案的根資料夾

5. 將 Google 代碼管理工具連結至您的應用程式

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」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」screenName做為「資料層變數名稱」screenName。
8. 按一下「設定預設值」。
9. 輸入預設值 unknown screen。
10. 按一下 [建立變數]。

c. 建立標題為「畫面瀏覽」的 GTM 代碼

1. 登入 Google 代碼管理工具 讓他們使用服務帳戶
2. 請選取行動容器。
3. 按一下左側導覽列中的「代碼」。
4. 按一下 [新增]。
5. 按一下「未命名的代碼」輸入代碼名稱 畫面瀏覽：
6. 選擇產品「Google Analytics」。
7. 從清單中選取「追蹤 ID」。
8. 選取「應用程式瀏覽」做為「追蹤類型」。
9. 按一下「更多設定」。
10. 按一下「要設定的欄位」。
11. 按一下「+ 新增欄位」。
12. 選取欄位名稱「screenName」screenName及其值「Screen Name」screenName。
13. 按一下「繼續」。
14. 在「啟動時機」下方，選取「任何事件」。
15. 按一下「建立代碼」。

請參閱建立「畫面瀏覽」GTM 代碼的螢幕截圖。

d. 加入畫面追蹤程式碼

1. 在 Xcode 中開啟「ViewController.swift」檔案。
2. 在dataLayer ViewController 類別：

   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」eventAction做為「資料層變數名稱」eventAction。
8. 按一下「設定預設值」。
9. 輸入預設值「不明事件」。
10. 按一下 [建立變數]。

b. 建立名為「事件」的自訂事件變數

1. 登入 Google 代碼管理工具 讓他們使用服務帳戶
2. 請選取行動容器。
3. 按一下左側導覽列中的「變數」。
4. 在「使用者定義的變數」下方點擊 [新增]。
5. 按一下「未命名的變數」，輸入變數名稱「事件」。
6. 選擇「自訂事件」做為變數類型。
7. 按一下 [建立變數]。

c. 建立標題為「按下按鈕」的 GTM 代碼

1. 登入 Google 代碼管理工具 讓他們使用服務帳戶
2. 請選取行動容器。
3. 按一下左側導覽列中的「代碼」。
4. 按一下 [新增]。
5. 按一下「未命名的代碼」輸入代碼名稱 已按下按鈕。
6. 選擇產品「Google Analytics」。
7. 從清單中選取「追蹤 ID」。
8. 選取「事件」做為「追蹤類型」。
9. 選取「事件」類別。
10. 選取「事件動作」。
11. 按一下「繼續」。
12. 在「啟動時機」下方，選取「任何事件」。
13. 按一下「建立代碼」。

請參閱建立「已按下按鈕」GTM 代碼的螢幕截圖。

d. 建立按鈕並新增程式碼，追蹤使用者是否已按下按鈕

1. 開啟 Xcode 專案。
2. 開啟 Main.storyboard。
3. 按一下 Xcode 工具列右上角的按鈕 公用程式區域 (右側欄)。
4. 在公用程式區域底部
   

   按一下「Show the Object library」(顯示物件庫) 按鈕 (藍色按鈕)：

   
5. 在搜尋框中輸入「button」。
   
6. 將 Button 拖曳到分鏡腳本並放到腳本頂端 如要下載此版本的檔案 請點選左上方的帽子眼鏡圖示
   
7. 按一下小幫手編輯器按鈕 。
8. 按住 Ctrl 鍵，同時拖曳按鈕 貼在 ViewController 類別定義底部。
   
9. 在對話方塊中選取「動作」連線，然後輸入函式名稱 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 (產品) >執行Xcode 將建構並執行應用程式：