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

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

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

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

   $ 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. คลิกการตั้งค่าบิลด์ในพื้นที่ของตัวแก้ไข
   
3. เลือกทั้งหมดและแบบรวม แล้วค้นหาการบริดจ์
   
4. ที่คอลัมน์ด้านขวาของแถวที่มีส่วนหัวการเชื่อมวัตถุประสงค์-C ป้อน 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 ชื่อ Screen View
4. เพิ่มโค้ดติดตามหน้าจอ

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

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

ข. สร้างตัวแปรชั้นข้อมูลชื่อ 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. สร้างตัวแปรเหตุการณ์ที่กําหนดเองชื่อ Event
3. สร้างแท็ก GTM ชื่อกดปุ่ม
4. สร้างปุ่มและเพิ่มโค้ดเพื่อติดตามว่ามีการกดปุ่ม

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

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

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

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. ป้อน button ที่ช่องค้นหา
   
6. ลากปุ่มไปยังสตอรีบอร์ดแล้ววางไว้ที่ด้านบนสุด มุมซ้าย
   
7. คลิกปุ่มเครื่องมือแก้ไขของผู้ช่วย ในแถบเครื่องมือ Xcode
8. ขณะที่กดปุ่ม Ctrl ค้างไว้ ให้ลากปุ่มและวาง ที่ด้านล่างของคำจำกัดความคลาส ViewController
   
9. ในกล่องโต้ตอบ ให้เลือกการเชื่อมต่อ Action จากนั้นป้อนชื่อฟังก์ชัน buttonPressed แล้วคลิกเชื่อมต่อ
   

   การดำเนินการนี้จะเพิ่มฟังก์ชันต่อไปนี้ต่อท้ายแท็ก คำจำกัดความคลาส 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 จะสร้างและเรียกใช้แอปดังนี้