Hướng dẫn này mô tả cách tạo và triển khai ứng dụng iOS trong Swift để theo dõi các sự kiện mở màn hình và các sự kiện được nhấn nút bằng Trình quản lý thẻ của Google (GTM).
1. Tạo dự án mới
- Mở Xcode.
- Nhấp vào Tạo dự án Xcode mới.
- Chọn Single View Application (Ứng dụng khung hiển thị đơn).
- Nhấp vào Tiếp theo.
- Đặt tên cho dự án rồi chọn các lựa chọn bổ sung cho dự án đó. Tên dự án và tên ứng dụng của bạn sẽ giống với tên sản phẩm.
- Nhấp vào Tiếp theo.
- Chọn vị trí dự án (thư mục).
- Nhấp vào Tạo.
2. Cài đặt các phần phụ thuộc Trình quản lý thẻ của Google
- Thoát khỏi Xcode.
- Trong dòng lệnh, hãy chạy lệnh sau để cài đặt CocoaPods:
$ sudo gem install cocoapods
- Thay đổi đối với thư mục dự án.
- Chạy lệnh sau để tạo một tệp có tên
Podfile
:$ pod init
- Trong
Podfile
, hãy huỷ nhận xétuse_frameworks!
và thêmpod 'GoogleTagManager'
vào mục tiêu: - Chạy lệnh sau để tải và cài đặt các phần phụ thuộc
Trình quản lý thẻ của Google (GTM) vào dự án của bạn:
$ pod install
Lệnh này cũng tạo không gian làm việc
GtmSwiftTutorial.xcworkspace
. Từ giờ trở đi, hãy sử dụng không gian làm việc này để phát triển ứng dụngGtmSwiftTutorial
.
# Uncomment this line if you're using Swift use_frameworks! target 'GtmSwiftTutorial' do pod 'GoogleTagManager' end
3. Thêm tiêu đề cầu nối cho thư viện Objective-C
Cách tạo tệp tiêu đề cầu nối:
- Mở Xcode.
- Nhấp vào File > New > File (Tệp > Mới > Tệp).
- Trong iOS > Source (iOS > Nguồn), hãy chọn Header File (Tệp tiêu đề).
- Nhấp vào Tiếp theo.
- Nhập tên tệp tiêu đề
BridgingHeader.h
.
- Nhấp vào Tạo.
- Thêm các câu lệnh
import
sau vào tệp tiêu đề:#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 */
Cách thêm tiêu đề cầu nối Objective-C trên chế độ cài đặt bản dựng:
- Trong Xcode, hãy nhấp vào dự án của bạn.
- Nhấp vào Build Settings (Cài đặt bản dựng) trong khu vực chỉnh sửa.
- Chọn All (Tất cả) và Composable (Kết hợp) rồi tìm Cầu nối.
- Trên cột bên phải của hàng có chứa Tiêu đề cầu nối Objective-C,
hãy nhập
BridgingHeader.h
.
4. Thêm vùng chứa mặc định vào dự án
Trước khi thêm một vùng chứa mặc định vào dự án, hãy tải tệp nhị phân của vùng chứa trên thiết bị di động xuống:
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
- Chọn một vùng chứa cho thiết bị di động.
- Nhấp vào Phiên bản ở thanh trình đơn.
- Nhấp vào Thao tác > Tải xuống trên phiên bản vùng chứa đã chọn.
GTM-PT3L9Z
.
Cách thêm tệp nhị phân của vùng chứa mặc định vào dự án:
- Mở Xcode.
- Nhấp vào biểu tượng Finder trên thanh Dock.
- Nhấp vào thư mục
Downoloads
. - Kéo tệp nhị phân của vùng chứa vào thư mục
Downloads
rồi thả tệp đó vào thư mục gốc của dự án Xcode.
5. Liên kết Trình quản lý thẻ của Google với ứng dụng của bạn
- Trong Xcode, hãy mở tệp
AppDelegate.swift
. - Yêu cầu lớp
AppDelegate
mở rộng lớpTAGContainerOpenerNotifier
:import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier { // ... }
Sau khi mở rộng lớp này, bạn sẽ gặp lỗi
Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'
. Bước sau đây sẽ khắc phục lỗi này. - Thêm hàm sau vào cuối phần định nghĩa lớp
AppDelegate
:func containerAvailable(container: TAGContainer!) { container.refresh() }
- Trong hàm
application
, hãy thêm mã sau trước câu lệnhreturn 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. Theo dõi sự kiện mở màn hình
Cách theo dõi sự kiện mở màn hình:
- Tạo biến để lưu trữ mã theo dõi.
- Tạo biến lớp dữ liệu có tên là screenName.
- Tạo một thẻ GTM có tiêu đề Lượt xem màn hình.
- Thêm mã theo dõi màn hình.
a. Tạo biến để lưu trữ mã theo dõi
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
- Trong Biến do người dùng xác định, hãy nhấp vào Mới.
- Nhấp vào Biến không có tiêu đề để nhập tên biến Mã theo dõi.
- Chọn Hằng số làm loại biến.
- Nhập mã theo dõi (ở dạng
UA-XXXXXXXX-X
, trong đóX
là một chữ số) làm giá trị của biến.Sử dụngUA-47605289-5
(sẽ bị xoá). - Nhấp vào Tạo biến.
b. Tạo biến lớp dữ liệu có tên screenName
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
- Trong Biến do người dùng xác định, hãy nhấp vào Mới.
- Nhấp vào Biến không có tiêu đề để nhập tiêu đề Tên màn hình.
- Chọn Biến lớp dữ liệu làm loại biến.
- Nhập screenName làm Tên biến lớp dữ liệu.
- Nhấp vào Đặt giá trị mặc định.
- Nhập giá trị mặc định màn hình không xác định.
- Nhấp vào Tạo biến.
c. Tạo một thẻ GTM có tiêu đề là Screen View (Lượt xem màn hình)
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Thẻ.
- Nhấp vào Mới.
- Nhấp vào Thẻ không có tiêu đề để nhập tên thẻ Chế độ xem màn hình.
- Chọn sản phẩm Google Analytics.
- Chọn Mã theo dõi trong danh sách.
- Chọn App View (Chế độ xem ứng dụng) làm Loại theo dõi.
- Nhấp vào Chế độ cài đặt khác.
- Nhấp vào Các trường cần đặt.
- Nhấp vào + Thêm trường.
- Chọn tên trường screenName và giá trị của trường đó là Screen Name (Tên màn hình).
- Nhấp vào Tiếp tục.
- Trong mục Kích hoạt trên, hãy chọn Sự kiện bất kỳ.
- Nhấp vào Tạo thẻ.
d. Thêm mã theo dõi màn hình
- Mở tệp
ViewController.swift
trong Xcode. - Xác định biến có tên
dataLayer
bên trong lớpViewController
:var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
- Trong hàm
viewDidLoad()
, hãy đẩy sự kiệnOpenScreen
vào lớp dữ liệu:dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
Định nghĩa của lớp ViewController
có dạng như sau:
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. Sự kiện được nhấn nút theo dõi
Cách theo dõi một sự kiện khi nhấn nút:
- Tạo một biến lớp dữ liệu có tên là eventAction.
- Tạo một biến sự kiện tuỳ chỉnh có tên là Event.
- Tạo một thẻ GTM có tiêu đề Button Pressed (Nhấn nút).
- Tạo một nút và thêm mã để theo dõi việc người dùng nhấn nút đó.
a. Tạo biến lớp dữ liệu có tên eventAction
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
- Trong Biến do người dùng xác định, hãy nhấp vào Mới.
- Nhấp vào Biến không có tiêu đề để nhập tiêu đề Hành động sự kiện.
- Chọn Biến lớp dữ liệu làm loại biến.
- Nhập eventAction làm Tên biến lớp dữ liệu.
- Nhấp vào Đặt giá trị mặc định.
- Nhập giá trị mặc định sự kiện không xác định.
- Nhấp vào Tạo biến.
b. Tạo biến sự kiện tuỳ chỉnh có tên là Sự kiện
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
- Trong Biến do người dùng xác định, hãy nhấp vào Mới.
- Nhấp vào Biến không có tiêu đề để nhập tên biến là Sự kiện.
- Chọn Sự kiện tuỳ chỉnh làm loại biến.
- Nhấp vào Tạo biến.
c. Tạo thẻ GTM có tiêu đề Button Pressed
- Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
- Chọn một vùng chứa cho thiết bị di động.
- Trên thanh điều hướng bên trái, hãy nhấp vào Thẻ.
- Nhấp vào Mới.
- Nhấp vào Thẻ không có tiêu đề để nhập tên thẻ Nút được nhấn.
- Chọn sản phẩm Google Analytics.
- Chọn Mã theo dõi trong danh sách.
- Chọn Sự kiện làm Loại theo dõi.
- Chọn danh mục Sự kiện.
- Chọn Hành động sự kiện.
- Nhấp vào Tiếp tục.
- Trong mục Kích hoạt trên, hãy chọn Sự kiện bất kỳ.
- Nhấp vào Tạo thẻ.
d. Tạo một nút và thêm mã để theo dõi việc người dùng nhấn nút đó
- Mở dự án Xcode của bạn.
- Mở
Main.storyboard
. - Nhấp vào nút trên cùng bên phải trong thanh công cụ Xcode để mở vùng tiện ích (thanh bên bên phải).
- Ở cuối vùng tiện ích,
nhấp vào nút Hiển thị thư viện đối tượng (nút màu xanh dương):
- Nhập button vào hộp tìm kiếm.
- Kéo Nút vào bảng phân cảnh và thả nút vào góc trên cùng bên trái.
- Nhấp vào nút trình chỉnh sửa trợ lý trên thanh công cụ Xcode.
- Trong khi nhấn và giữ phím Ctrl, hãy kéo và thả nút này xuống cuối phần định nghĩa lớp
ViewController
.
- Trong hộp thoại, hãy chọn kết nối Action (Hành động), nhập tên hàm buttonPressed (Nhấn nút) rồi nhấp vào Connect (Kết nối).
Thao tác này sẽ thêm hàm sau vào cuối định nghĩa lớp
ViewController
:@IBAction func buttonPressed(sender: AnyObject) { }
Hàm này sẽ được thực thi mỗi khi người dùng nhấn nút.
- Trong hàm
buttonPressed
, hãy thêm mã sau để đẩy sự kiệnButtonPressed
vào lớp ngày:@IBAction func buttonPressed(sender: AnyObject) { dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"]) }
8. Tạo và chạy ứng dụng
Trong Xcode, hãy nhấp vào Sản phẩm > Chạy. Xcode sẽ tạo và chạy ứng dụng: