คู่มือนี้อธิบายวิธีสร้างและใช้แอป iOS ใน Swift เพื่อติดตามเหตุการณ์การเปิดหน้าจอและการกดปุ่มด้วย Google Tag Manager (GTM)
1. สร้างโปรเจ็กต์ใหม่
- เปิด Xcode
- คลิกสร้างโปรเจ็กต์ Xcode ใหม่
- เลือก Single View Application
- คลิกถัดไป
- ตั้งชื่อโปรเจ็กต์และเลือกตัวเลือกเพิ่มเติม ชื่อโปรเจ็กต์และชื่อแอปจะเหมือนกับชื่อผลิตภัณฑ์
- คลิกถัดไป
- เลือกตำแหน่งโปรเจ็กต์ (ไดเรกทอรี)
- คลิกสร้าง
2. ติดตั้งทรัพยากร Dependency ของ Google Tag Manager
- ออกจาก Xcode
- ในเทอร์มินัล ให้เรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง Cocoapods
$ sudo gem install cocoapods
- เปลี่ยนเป็นไดเรกทอรีโปรเจ็กต์
- เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างไฟล์ชื่อ
Podfile
$ pod init
- ใน
Podfile
ให้ยกเลิกความคิดเห็นuse_frameworks!
และเพิ่มpod 'GoogleTagManager'
ไปยังเป้าหมาย - เรียกใช้คำสั่งต่อไปนี้เพื่อดาวน์โหลดและติดตั้งทรัพยากร Dependency ของ Google Tag Manager (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
- คลิกไฟล์ > ใหม่ > ไฟล์
- ในส่วน iOS > Source ให้เลือกHeader File
- คลิกถัดไป
- ป้อนชื่อไฟล์ส่วนหัว
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 ให้คลิกโปรเจ็กต์ของคุณ
- คลิกการตั้งค่าบิลด์ในพื้นที่ตัวแก้ไข
- เลือกทั้งหมดและแบบรวม แล้วค้นหาการบริดจ์
- ในคอลัมน์ด้านขวาของแถวที่มี Objective-C Bridging Header ให้ป้อน
BridgingHeader.h
4. เพิ่มคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์
ก่อนที่จะเพิ่มคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์ ให้ดาวน์โหลดไบนารีของคอนเทนเนอร์อุปกรณ์เคลื่อนที่ดังนี้
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- คลิกเวอร์ชันที่แถบเมนู
- คลิกการทำงาน > ดาวน์โหลดในเวอร์ชันคอนเทนเนอร์ที่เลือก
GTM-PT3L9Z
วิธีเพิ่มไบนารีของคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์
- เปิด Xcode
- คลิกไอคอน Finder บน Dock
- คลิกโฟลเดอร์
Downoloads
- ลากไฟล์ไบนารีของคอนเทนเนอร์ในโฟลเดอร์
Downloads
แล้ววางลงในโฟลเดอร์รูทของโปรเจ็กต์ Xcode
5. ลิงก์ Google Tag Manager กับแอปของคุณ
- เปิดไฟล์
AppDelegate.swift
ใน Xcode - ให้คลาส
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. ติดตามเหตุการณ์การเปิดหน้าจอ
วิธีติดตามกิจกรรมการเปิดหน้าจอ
- สร้างตัวแปรเพื่อจัดเก็บรหัสติดตาม
- สร้างตัวแปรชั้นข้อมูลชื่อ screenName
- สร้างแท็ก GTM ชื่อการดูหน้าจอ
- เพิ่มโค้ดติดตามหน้าจอ
a. สร้างตัวแปรเพื่อจัดเก็บรหัสติดตาม
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- ในแถบนำทางด้านซ้าย คลิกตัวแปร
- ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
- คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อตัวแปรรหัสติดตาม
- เลือกประเภทตัวแปรเป็นคงที่
- ป้อนรหัสติดตาม (ในรูปแบบ
UA-XXXXXXXX-X
โดยX
เป็นตัวเลข) เป็นค่าของตัวแปรใช้UA-47605289-5
(จะลบออก) - คลิกสร้างตัวแปร
b. สร้างตัวแปรชั้นข้อมูลชื่อ screenName
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- ในแถบนำทางด้านซ้าย คลิกตัวแปร
- ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
- คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อชื่อหน้าจอ
- เลือกตัวแปรชั้นข้อมูลเป็นประเภทตัวแปร
- ป้อน screenName เป็นชื่อตัวแปรชั้นข้อมูล
- คลิกตั้งค่าเริ่มต้น
- ป้อนค่าเริ่มต้นเป็นหน้าจอที่ไม่รู้จัก
- คลิกสร้างตัวแปร
ค. สร้างแท็ก GTM ชื่อ "การดูหน้าจอ"
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- คลิกแท็กในแถบนำทางด้านซ้าย
- คลิกใหม่
- คลิกแท็กที่ไม่มีชื่อเพื่อป้อนชื่อแท็ก การดูหน้าจอ
- เลือกผลิตภัณฑ์ Google Analytics
- เลือกรหัสติดตามจากรายการ
- เลือกมุมมองแอปเป็นประเภทการติดตาม
- คลิกการตั้งค่าเพิ่มเติม
- คลิกช่องที่จะต้องตั้งค่า
- คลิก + เพิ่มช่อง
- เลือกชื่อช่อง screenName และค่า Screen Name ของช่อง
- คลิกต่อไป
- ภายในเริ่มทำงานใน เลือกเหตุการณ์ใดก็ได้
- คลิกสร้างแท็ก
ง. เพิ่มโค้ดติดตามหน้าจอ
- เปิดไฟล์
ViewController.swift
ใน Xcode - กำหนดตัวแปรชื่อ
dataLayer
ภายในคลาสViewController
ดังนี้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 Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- ในแถบนำทางด้านซ้าย คลิกตัวแปร
- ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
- คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อการกระทำของเหตุการณ์
- เลือกตัวแปรชั้นข้อมูลเป็นประเภทตัวแปร
- ป้อน eventAction เป็นชื่อตัวแปรชั้นข้อมูล
- คลิกตั้งค่าเริ่มต้น
- ป้อนค่าเริ่มต้นกิจกรรมที่ไม่รู้จัก
- คลิกสร้างตัวแปร
b. สร้างตัวแปรเหตุการณ์ที่กําหนดเองชื่อ "เหตุการณ์"
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- ในแถบนำทางด้านซ้าย คลิกตัวแปร
- ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
- คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อตัวแปรเหตุการณ์
- เลือกเหตุการณ์ที่กำหนดเองเป็นประเภทตัวแปร
- คลิกสร้างตัวแปร
ค. สร้างแท็ก GTM ที่มีชื่อว่า "กดปุ่มแล้ว"
- ลงชื่อเข้าใช้บัญชี Google Tag Manager
- เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
- คลิกแท็กในแถบนำทางด้านซ้าย
- คลิกใหม่
- คลิกแท็กที่ไม่มีชื่อเพื่อป้อนชื่อแท็ก กดปุ่ม
- เลือกผลิตภัณฑ์ Google Analytics
- เลือกรหัสติดตามจากรายการ
- เลือกเหตุการณ์เป็นประเภทการติดตาม
- เลือกหมวดหมู่กิจกรรม
- เลือกการทำงานของเหตุการณ์
- คลิกต่อไป
- ภายในเริ่มทำงานใน เลือกเหตุการณ์ใดก็ได้
- คลิกสร้างแท็ก
ง. สร้างปุ่มและเพิ่มโค้ดเพื่อติดตามว่ามีการกดปุ่มดังกล่าว
- เปิดโปรเจ็กต์ Xcode
- เปิด
Main.storyboard
- คลิกปุ่มขวาสุดในแถบเครื่องมือ Xcode เพื่อเปิดพื้นที่ยูทิลิตี (แถบด้านข้างขวา)
- ที่ด้านล่างของพื้นที่สาธารณูปโภค
คลิกปุ่มแสดงคลังวัตถุ (ปุ่มสีน้ำเงิน)
- ป้อนปุ่มที่ช่องค้นหา
- ลากปุ่มไปที่สตอรีบอร์ดแล้ววางที่มุมซ้ายบน
- คลิกปุ่มเครื่องมือแก้ไข Assistant ในแถบเครื่องมือ 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 จะสร้างและเรียกใช้แอป: