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

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

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

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

2. ติดตั้งข้อกําหนดของ 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) ลงในโปรเจ็กต์

   $ pod install
   

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

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

วิธีสร้างไฟล์ส่วนหัวบริดจ์

1. เปิด Xcode
2. คลิก File > New > File
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. ในคอลัมน์ด้านขวาของแถวที่มีส่วนหัวบริดจ์ Objective-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. ป้อนค่าเริ่มต้น unknown screen
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 ที่มีชื่อว่า Button Pressed
4. สร้างปุ่มและเพิ่มโค้ดเพื่อติดตามการกดปุ่ม

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

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

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

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

   ซึ่งจะเพิ่มฟังก์ชันต่อไปนี้ไว้ที่ท้ายคำจำกัดความคลาส ViewController

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   ระบบจะเรียกใช้ฟังก์ชันทุกครั้งที่กดปุ่ม

10. ในฟังก์ชัน buttonPressed ให้เพิ่มโค้ดต่อไปนี้เพื่อส่งเหตุการณ์ ButtonPressed ไปยังเลเยอร์วัน

    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. สร้างและเรียกใช้แอป

ใน Xcode ให้คลิกผลิตภัณฑ์ > เรียกใช้ Xcode จะสร้างและเรียกใช้แอปโดยทำดังนี้