คู่มือเริ่มต้นใช้งานสำหรับ Swift

คู่มือนี้อธิบายวิธีสร้างและใช้แอป iOS ใน Swift เพื่อติดตามเหตุการณ์การเปิดหน้าจอและการกดปุ่มด้วย Google Tag Manager (GTM)

1. สร้างโปรเจ็กต์ใหม่

1. เปิด Xcode
2. คลิกสร้างโปรเจ็กต์ Xcode ใหม่
3. เลือก Single View Application
4. คลิกถัดไป
5. ตั้งชื่อโปรเจ็กต์และเลือกตัวเลือกเพิ่มเติม ชื่อโปรเจ็กต์และชื่อแอปจะเหมือนกับชื่อผลิตภัณฑ์
   
6. คลิกถัดไป
7. เลือกตำแหน่งโปรเจ็กต์ (ไดเรกทอรี)
8. คลิกสร้าง

2. ติดตั้งทรัพยากร Dependency ของ Google Tag Manager

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. เรียกใช้คำสั่งต่อไปนี้เพื่อดาวน์โหลดและติดตั้งทรัพยากร Dependency ของ Google Tag Manager (GTM) ในโปรเจ็กต์

   $ pod install
   

   คำสั่งนี้จะสร้างพื้นที่ทำงาน GtmSwiftTutorial.xcworkspace ด้วย จากนี้ไป ให้ใช้พื้นที่ทำงานนี้เพื่อพัฒนาแอป GtmSwiftTutorial

3. เพิ่มส่วนหัวการบริดจ์สำหรับไลบรารี Objective-C

หากต้องการสร้างไฟล์ส่วนหัวการบริดจ์ ให้ทำดังนี้

1. เปิด Xcode
2. คลิกไฟล์ > ใหม่ > ไฟล์
3. ในส่วน iOS > Source ให้เลือกHeader File
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. คลิกการตั้งค่าบิลด์ในพื้นที่ตัวแก้ไข
   
3. เลือกทั้งหมดและแบบรวม แล้วค้นหาการบริดจ์
   
4. ในคอลัมน์ด้านขวาของแถวที่มี Objective-C Bridging Header ให้ป้อน BridgingHeader.h
   

4. เพิ่มคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์

ก่อนที่จะเพิ่มคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์ ให้ดาวน์โหลดไบนารีของคอนเทนเนอร์อุปกรณ์เคลื่อนที่ดังนี้

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. คลิกเวอร์ชันที่แถบเมนู
4. คลิกการทำงาน > ดาวน์โหลดในเวอร์ชันคอนเทนเนอร์ที่เลือก
ชื่อของไฟล์ที่ดาวน์โหลดจะเป็นรหัสคอนเทนเนอร์ เช่น GTM-PT3L9Z

วิธีเพิ่มไบนารีของคอนเทนเนอร์เริ่มต้นลงในโปรเจ็กต์

1. เปิด Xcode
2. คลิกไอคอน Finder บน Dock
3. คลิกโฟลเดอร์ Downoloads
4. ลากไฟล์ไบนารีของคอนเทนเนอร์ในโฟลเดอร์ Downloads แล้ววางลงในโฟลเดอร์รูทของโปรเจ็กต์ Xcode

5. ลิงก์ Google Tag Manager กับแอปของคุณ

1. เปิดไฟล์ AppDelegate.swift ใน Xcode
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. สร้างตัวแปรเพื่อจัดเก็บรหัสติดตาม
2. สร้างตัวแปรชั้นข้อมูลชื่อ screenName
3. สร้างแท็ก GTM ชื่อการดูหน้าจอ
4. เพิ่มโค้ดติดตามหน้าจอ

a. สร้างตัวแปรเพื่อจัดเก็บรหัสติดตาม

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. ในแถบนำทางด้านซ้าย คลิกตัวแปร
4. ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
5. คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อตัวแปรรหัสติดตาม
6. เลือกประเภทตัวแปรเป็นคงที่
7. ป้อนรหัสติดตาม (ในรูปแบบ UA-XXXXXXXX-X โดย X เป็นตัวเลข) เป็นค่าของตัวแปร
   ใช้ UA-47605289-5 (จะลบออก)
8. คลิกสร้างตัวแปร

b. สร้างตัวแปรชั้นข้อมูลชื่อ screenName

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. ในแถบนำทางด้านซ้าย คลิกตัวแปร
4. ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
5. คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อชื่อหน้าจอ
6. เลือกตัวแปรชั้นข้อมูลเป็นประเภทตัวแปร
7. ป้อน screenName เป็นชื่อตัวแปรชั้นข้อมูล
8. คลิกตั้งค่าเริ่มต้น
9. ป้อนค่าเริ่มต้นเป็นหน้าจอที่ไม่รู้จัก
10. คลิกสร้างตัวแปร

ค. สร้างแท็ก GTM ชื่อ "การดูหน้าจอ"

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. คลิกแท็กในแถบนำทางด้านซ้าย
4. คลิกใหม่
5. คลิกแท็กที่ไม่มีชื่อเพื่อป้อนชื่อแท็ก การดูหน้าจอ
6. เลือกผลิตภัณฑ์ Google Analytics
7. เลือกรหัสติดตามจากรายการ
8. เลือกมุมมองแอปเป็นประเภทการติดตาม
9. คลิกการตั้งค่าเพิ่มเติม
10. คลิกช่องที่จะต้องตั้งค่า
11. คลิก + เพิ่มช่อง
12. เลือกชื่อช่อง screenName และค่า Screen Name ของช่อง
13. คลิกต่อไป
14. ภายในเริ่มทำงานใน เลือกเหตุการณ์ใดก็ได้
15. คลิกสร้างแท็ก

ดูภาพหน้าจอของการสร้างแท็ก GTM การดูหน้าจอ

ง. เพิ่มโค้ดติดตามหน้าจอ

1. เปิดไฟล์ ViewController.swift ใน Xcode
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 Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. ในแถบนำทางด้านซ้าย คลิกตัวแปร
4. ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
5. คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อการกระทำของเหตุการณ์
6. เลือกตัวแปรชั้นข้อมูลเป็นประเภทตัวแปร
7. ป้อน eventAction เป็นชื่อตัวแปรชั้นข้อมูล
8. คลิกตั้งค่าเริ่มต้น
9. ป้อนค่าเริ่มต้นกิจกรรมที่ไม่รู้จัก
10. คลิกสร้างตัวแปร

b. สร้างตัวแปรเหตุการณ์ที่กําหนดเองชื่อ "เหตุการณ์"

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. ในแถบนำทางด้านซ้าย คลิกตัวแปร
4. ในส่วนตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
5. คลิกตัวแปรที่ไม่มีชื่อเพื่อป้อนชื่อตัวแปรเหตุการณ์
6. เลือกเหตุการณ์ที่กำหนดเองเป็นประเภทตัวแปร
7. คลิกสร้างตัวแปร

ค. สร้างแท็ก GTM ที่มีชื่อว่า "กดปุ่มแล้ว"

1. ลงชื่อเข้าใช้บัญชี Google Tag Manager
2. เลือกคอนเทนเนอร์บนอุปกรณ์เคลื่อนที่
3. คลิกแท็กในแถบนำทางด้านซ้าย
4. คลิกใหม่
5. คลิกแท็กที่ไม่มีชื่อเพื่อป้อนชื่อแท็ก กดปุ่ม
6. เลือกผลิตภัณฑ์ Google Analytics
7. เลือกรหัสติดตามจากรายการ
8. เลือกเหตุการณ์เป็นประเภทการติดตาม
9. เลือกหมวดหมู่กิจกรรม
10. เลือกการทำงานของเหตุการณ์
11. คลิกต่อไป
12. ภายในเริ่มทำงานใน เลือกเหตุการณ์ใดก็ได้
13. คลิกสร้างแท็ก

ดูภาพหน้าจอของการสร้างแท็ก GTM แบบกดปุ่ม

ง. สร้างปุ่มและเพิ่มโค้ดเพื่อติดตามว่ามีการกดปุ่มดังกล่าว

1. เปิดโปรเจ็กต์ Xcode
2. เปิด Main.storyboard
3. คลิกปุ่มขวาสุดในแถบเครื่องมือ Xcode เพื่อเปิดพื้นที่ยูทิลิตี (แถบด้านข้างขวา)
4. ที่ด้านล่างของพื้นที่สาธารณูปโภค
   

   คลิกปุ่มแสดงคลังวัตถุ (ปุ่มสีน้ำเงิน)

   
5. ป้อนปุ่มที่ช่องค้นหา
   
6. ลากปุ่มไปที่สตอรีบอร์ดแล้ววางที่มุมซ้ายบน
   
7. คลิกปุ่มเครื่องมือแก้ไข Assistant ในแถบเครื่องมือ 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 จะสร้างและเรียกใช้แอป: