Swift 入門指南

本指南將說明如何在 Swift 中建立並導入 iOS 應用程式，以使用 Google 代碼管理工具 (GTM) 追蹤畫面開啟和按鈕按下的事件。

1. 建立新專案

1. 開啟 Xcode。
2. 按一下「Create a new Xcode project」。
3. 選取「Single View Application」(單一檢視應用程式)。
4. 按一下「Next」。
5. 為專案命名並選擇其他選項。專案名稱和應用程式名稱將與產品名稱相同。
   
6. 按一下「Next」。
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. 依序按一下「File」>「New」>「File」。
3. 在「iOS」>「來源」下方，選取「標頭檔案」。
4. 按一下「Next」。
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 的資料層變數。
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. 輸入預設值 unknown screen。
10. 按一下 [建立變數]。

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

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

查看建立畫面瀏覽 GTM 代碼的螢幕擷取畫面。

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. 建立名為「事件」的自訂事件變數

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

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

1. 登入 Google 代碼管理工具帳戶。
2. 請選取行動容器。
3. 按一下左側導覽列中的「代碼」。
4. 按一下 [新增]。
5. 按一下「Untitled Tag」，輸入標記名稱：Button Pressed。
6. 選擇「Google Analytics (分析)」產品。
7. 從清單中選取「追蹤 ID」。
8. 選取「事件」做為「追蹤類型」。
9. 選取「活動」類別。
10. 選取「事件動作」。
11. 按一下 [繼續]。
12. 在「啟動時機」下方，選取「任何事件」。
13. 按一下「建立代碼」。

查看建立 Button Pressed 的 GTM 代碼的螢幕截圖。

d. 建立按鈕並新增程式碼，以便追蹤使用者按下按鈕

1. 開啟 Xcode 專案。
2. 開啟 Main.storyboard。
3. 按一下 Xcode 工具列最右上方的按鈕，即可開啟公用程式區域 (右側欄)。
4. 公用事業區域底部的
   

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

   
5. 在搜尋框中輸入按鈕。
   
6. 將「按鈕」拖曳至分鏡腳本，並將其拖曳到左上角。
   
7. 按一下 Xcode 工具列中的助理編輯器按鈕 。
8. 按住 Ctrl 鍵，同時將按鈕拖曳至 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 會建構並執行應用程式：