本指南將說明如何在 Swift 中建立並導入 iOS 應用程式,以使用 Google 代碼管理工具 (GTM) 追蹤畫面開啟和按鈕按下的事件。
1. 建立新專案
- 開啟 Xcode。
- 按一下「Create a new Xcode project」。
- 選取「Single View Application」(單一檢視應用程式)。
- 按一下「Next」。
- 為專案命名並選擇其他選項。專案名稱和應用程式名稱將與產品名稱相同。
- 按一下「Next」。
- 選取專案位置 (目錄)。
- 點選「建立」。
2. 安裝 Google 代碼管理工具依附元件
- 結束 Xcode。
- 在終端機中執行下列指令,安裝 Cocoapods:
$ sudo gem install cocoapods
- 變更為專案目錄。
- 執行下列指令,建立名為
Podfile
的檔案:$ pod init
- 在
Podfile
中,取消use_frameworks!
註解,然後將pod 'GoogleTagManager'
新增至目標: - 執行下列指令,在專案中下載並安裝 Google 代碼管理工具 (GTM) 依附元件:
$ pod install
這個指令也會建立工作空間
GtmSwiftTutorial.xcworkspace
。從現在起,請用這個工作空間開發GtmSwiftTutorial
應用程式。
# Uncomment this line if you're using Swift use_frameworks! target 'GtmSwiftTutorial' do pod 'GoogleTagManager' end
3. 為 Objective-C 程式庫新增橋接標頭
如何建立橋接標頭檔案:
- 開啟 Xcode。
- 依序按一下「File」>「New」>「File」。
- 在「iOS」>「來源」下方,選取「標頭檔案」。
- 按一下「Next」。
- 輸入標頭檔案名稱
BridgingHeader.h
。
- 點選「建立」。
- 在標頭檔案中加入以下
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 橋接標頭:
- 在 Xcode 中按一下您的專案。
- 按一下編輯器區域的「Build Settings」。
- 選取「全部」和「合併」,然後搜尋「橋接」。
- 在含有 Objective-C 橋接標頭的資料列的右欄中,輸入
BridgingHeader.h
。
4. 在專案中新增預設容器
在專案中新增預設容器之前,請先下載行動容器二進位檔:
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 按一下選單列中的「版本」。
- 在所選的容器版本中,依序點選「動作」>「下載」。
下載檔案的名稱是容器 ID,例如
GTM-PT3L9Z
。如要在專案中加入預設容器二進位檔:
- 開啟 Xcode。
- 按一下 Dock 上的「Finder」圖示。
- 按一下
Downoloads
資料夾。 - 將容器二進位檔案拖曳到
Downloads
資料夾中,並拖曳到 Xcode 專案的根資料夾。
5. 將 Google 代碼管理工具連結至您的應用程式
- 在 Xcode 中開啟檔案
AppDelegate.swift
。 - 讓
AppDelegate
類別擴充TAGContainerOpenerNotifier
類別:import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier { // ... }
擴充類別後,您會收到
Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'
錯誤。下列步驟會修正這項錯誤。 - 將下列函式新增至
AppDelegate
類別定義底部:func containerAvailable(container: TAGContainer!) { container.refresh() }
- 在
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. 追蹤畫面開啟事件
如何追蹤畫面開啟事件:
- 建立變數以儲存追蹤 ID。
- 建立名為 screenName 的資料層變數。
- 建立標題為「畫面瀏覽」的 GTM 代碼。
- 新增螢幕追蹤程式碼。
a. 建立變數以儲存追蹤 ID
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 點按左側導覽列中的「變數」。
- 在「使用者定義的變數」下方點擊 [新增]。
- 按一下「未命名的變數」,輸入變數名稱「追蹤 ID」。
- 選擇「常數」做為變數類型。
- 輸入追蹤 ID (格式為
UA-XXXXXXXX-X
,其中X
是數字),做為變數的值。如要刪除資料,請使用UA-47605289-5
。 - 按一下 [建立變數]。
b. 建立名為 screenName 的資料層變數
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 點按左側導覽列中的「變數」。
- 在「使用者定義的變數」下方點擊 [新增]。
- 按一下「未命名的變數」,輸入標題為「畫面名稱」。
- 選擇「資料層變數」做為變數類型。
- 輸入 screenName 做為「資料層變數名稱」。
- 按一下「設定預設值」。
- 輸入預設值 unknown screen。
- 按一下 [建立變數]。
c. 建立標題為「畫面瀏覽」的 GTM 代碼
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 按一下左側導覽列中的「代碼」。
- 按一下 [新增]。
- 按一下「未命名的代碼」,輸入標記名稱「畫面檢視畫面」。
- 選擇「Google Analytics (分析)」產品。
- 從清單中選取「追蹤 ID」。
- 選取「App View」做為「追蹤類型」。
- 按一下「更多設定」。
- 按一下「要設定的欄位」。
- 按一下「+ 新增欄位」。
- 選取欄位名稱「screenName」screenName,以及其值「Screen Name」screenName。
- 按一下 [繼續]。
- 在「啟動時機」下方,選取「任何事件」。
- 按一下「建立代碼」。
d. 新增畫面追蹤程式碼
- 在 Xcode 中開啟檔案
ViewController.swift
。 - 在
ViewController
類別中定義名為dataLayer
的變數:var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
- 在
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. 追蹤按鈕按下的事件
如何追蹤按鈕按下的事件:
- 建立名為 eventAction 的資料層變數。
- 建立名為「事件」的自訂事件變數。
- 建立標題為「已按下按鈕」的 GTM 代碼。
- 建立按鈕並新增程式碼,追蹤使用者按下按鈕的動作。
a. 建立名為 eventAction 的資料層變數
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 點按左側導覽列中的「變數」。
- 在「使用者定義的變數」下方點擊 [新增]。
- 按一下「未命名的變數」,輸入標題為「事件動作」。
- 選擇「資料層變數」做為變數類型。
- 輸入 eventAction 做為「資料層變數名稱」。
- 按一下「設定預設值」。
- 輸入預設值 unknown event。
- 按一下 [建立變數]。
b. 建立名為「事件」的自訂事件變數
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 點按左側導覽列中的「變數」。
- 在「使用者定義的變數」下方點擊 [新增]。
- 按一下「未命名的變數」,輸入變數名稱「事件」。
- 選擇「自訂事件」做為變數類型。
- 按一下 [建立變數]。
c. 建立標題為「已按下按鈕」的 GTM 代碼
- 登入 Google 代碼管理工具帳戶。
- 請選取行動容器。
- 按一下左側導覽列中的「代碼」。
- 按一下 [新增]。
- 按一下「Untitled Tag」,輸入標記名稱:Button Pressed。
- 選擇「Google Analytics (分析)」產品。
- 從清單中選取「追蹤 ID」。
- 選取「事件」做為「追蹤類型」。
- 選取「活動」類別。
- 選取「事件動作」。
- 按一下 [繼續]。
- 在「啟動時機」下方,選取「任何事件」。
- 按一下「建立代碼」。
d. 建立按鈕並新增程式碼,以便追蹤使用者按下按鈕
- 開啟 Xcode 專案。
- 開啟
Main.storyboard
。 - 按一下 Xcode 工具列最右上方的按鈕,即可開啟公用程式區域 (右側欄)。
- 公用事業區域底部的
按一下 [Show the Object library] (顯示物件庫) 按鈕 (藍色按鈕):
- 在搜尋框中輸入按鈕。
- 將「按鈕」拖曳至分鏡腳本,並將其拖曳到左上角。
- 按一下 Xcode 工具列中的助理編輯器按鈕 。
- 按住 Ctrl 鍵,同時將按鈕拖曳至
ViewController
類別定義底部。
- 在對話方塊中,選取「Action」(動作) 連線,輸入函式名稱 buttonPressed,然後按一下「Connect」。
這會將下列函式新增至
ViewController
類別定義結尾:@IBAction func buttonPressed(sender: AnyObject) { }
每次按下按鈕時,系統都會執行這個函式。
- 在
buttonPressed
函式中新增以下程式碼,將ButtonPressed
事件推送至日層:@IBAction func buttonPressed(sender: AnyObject) { dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"]) }
8. 建構並執行應用程式
在 Xcode 中,依序點選「Product」>「Run」。Xcode 會建構並執行應用程式: