Hướng dẫn bắt đầu sử dụng Swift

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 nhấn nút và mở màn hình bằng Trình quản lý thẻ của Google (GTM).

1. Tạo dự án mới

  1. Mở Xcode. tạo một dự án mới
  2. Nhấp vào Create a new Xcode project (Tạo dự án Xcode mới).
  3. Chọn Single View Application (Ứng dụng có một thành phần hiển thị). chọn ứng dụng có một chế độ xem
  4. Nhấp vào Tiếp theo.
  5. Đặt tên cho dự án và chọn các tuỳ chọn bổ sung cho dự án. Tên dự án và tên ứng dụng sẽ giống với tên sản phẩm.
    Nhập tên sản phẩm và các lựa chọn khác
  6. Nhấp vào Tiếp theo.
  7. Chọn vị trí (thư mục) của dự án.
  8. Nhấp vào Tạo.

2. Cài đặt các phần phụ thuộc của Trình quản lý thẻ của Google

  1. Thoát Xcode.
  2. Trong dòng lệnh, hãy chạy lệnh sau để cài đặt Cocoapods: 
    $ sudo gem install cocoapods
  3. Thay đổi sang thư mục dự án.
  4. Chạy lệnh sau đây để tạo một tệp có tên Podfile: 
    $ pod init
  5. Trong Podfile, hãy bỏ ghi chú use_frameworks! và thêm pod 'GoogleTagManager' vào mục tiêu:
    6. # Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end
  6. Chạy lệnh sau để tải xuống 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ờ, hãy sử dụng không gian làm việc này để phát triển ứng dụng GtmSwiftTutorial.

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:

  1. Mở Xcode.
  2. Nhấp vào File > New > File (Tệp > Mới > Tệp).
  3. Trong phần iOS > Source (iOS > Nguồn), hãy chọn Header File (Tệp tiêu đề).
  4. Nhấp vào Tiếp theo.
  5. Nhập tên tệp tiêu đề BridgingHeader.h.
    Tạo tệp tiêu đề cầu nối
  6. Nhấp vào Tạo.
  7. Thêm các câu lệnh import này 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 GOAL-C trong chế độ cài đặt bản dựng:

  1. Trong Xcode, hãy nhấp vào dự án của bạn.
  2. Nhấp vào Build Settings (Cài đặt bản dựng) trong khu vực trình chỉnh sửa.
    Nhấp vào Build Settings (Cài đặt bản dựng)
  3. Chọn Tất cả và Kết hợp rồi tìm kiếm cầu nối.
    Cầu nối tìm kiếm
  4. Trên cột bên phải của hàng chứa Tiêu đề cầu nối Mục tiêu-C, hãy nhập BridgingHeader.h.
    Thêm BridgingHeader.h làm Tiêu đề cầu nối Objective-C

4. Thêm vùng chứa mặc định vào dự án

Trước khi thêm vùng chứa mặc định vào dự án, hãy tải xuống tệp nhị phân vùng chứa dành cho thiết bị di động:

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn vùng chứa dành cho thiết bị di động.
  3. Nhấp vào Phiên bản trong thanh trình đơn.
  4. Nhấp vào Thao tác > Tải xuống trên phiên bản vùng chứa đã chọn.
    5. Tên của tệp đã tải xuống là mã vùng chứa, ví dụ: GTM-PT3L9Z.

Cách thêm tệp nhị phân của vùng chứa mặc định vào dự án:

  1. Mở Xcode.
  2. Nhấp vào biểu tượng Finder (Trình tìm kiếm) trên thanh Dock.
  3. Nhấp vào thư mục Downoloads.
  4. Kéo tệp nhị phân 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.
  1. Trong Xcode, hãy mở tệp AppDelegate.swift.
  2. Yêu cầu lớp AppDelegate mở rộng lớp TAGContainerOpenerNotifier:
    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.

  3. Thêm hàm sau vào cuối phần định nghĩa lớp AppDelegate:
    func containerAvailable(container: TAGContainer!) {
  container.refresh()
}
  4. Trong hàm application, hãy thêm mã sau đây trước câu lệnh 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. Theo dõi sự kiện mở màn hình

Cách theo dõi sự kiện mở màn hình:

  1. Tạo một biến để lưu trữ mã theo dõi.
  2. Tạo một biến lớp dữ liệu có tên là screenName.
  3. Tạo thẻ GTM có tiêu đề Chế độ xem màn hình.
  4. Thêm mã theo dõi màn hình.

a. Tạo một biến để lưu trữ mã theo dõi

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn vùng chứa dành cho thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
  4. Trong Biến do người dùng xác định, hãy nhấp vào Mới.
  5. Nhấp vào Untitled Variable (Biến chưa có tên) để nhập tên biến Tracking ID (Mã theo dõi).
  6. Chọn Constant (Hằng số) làm loại biến.
  7. 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ụng UA-47605289-5 (sẽ bị xoá).
  8. Nhấp vào Tạo biến.

b. Tạo một biến lớp dữ liệu có tên screenName

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn vùng chứa dành cho thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
  4. Trong Biến do người dùng xác định, hãy nhấp vào Mới.
  5. Nhấp vào Untitled Variable (Biến không có tiêu đề) để nhập tiêu đề Screen Name (Tên người dùng).
  6. Chọn Biến lớp dữ liệu làm loại biến.
  7. Nhập screenName làm Tên biến lớp dữ liệu.
  8. Nhấp vào Đặt giá trị mặc định.
  9. Nhập giá trị mặc định màn hình không xác định.
  10. Nhấp vào Tạo biến.

c. Tạo thẻ GTM có tiêu đề Chế độ xem màn hình

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn một vùng chứa thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Thẻ.
  4. Nhấp vào Mới.
  5. Nhấp vào Thẻ không có tiêu đề để nhập tên thẻ Chế độ xem màn hình.
  6. Chọn sản phẩm Google Analytics.
  7. Chọn Mã theo dõi trong danh sách.
  8. Chọn Chế độ xem ứng dụng làm Loại theo dõi.
  9. Nhấp vào Chế độ cài đặt khác.
  10. Nhấp vào Các trường cần đặt.
  11. Nhấp vào + Thêm trường.
  12. Chọn tên trường screenName và giá trị của trường đó là Screen Name.
  13. Nhấp vào Tiếp tục.
  14. Trong mục Fire On (Kích hoạt khi), hãy chọn Any Event (Mọi sự kiện).
  15. Nhấp vào Tạo thẻ.

d. Thêm mã theo dõi màn hình

  1. Mở tệp ViewController.swift trong Xcode.
  2. Xác định một biến có tên là dataLayer bên trong lớp ViewController:
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
  3. Trong hàm viewDidLoad(), hãy đẩy sự kiện OpenScreen vào lớp dữ liệu:
    dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])

Định nghĩa của lớp ViewController sẽ 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. Theo dõi sự kiện nhấn nút

Cách theo dõi sự kiện nhấn nút:

  1. Tạo một biến lớp dữ liệu có tên là eventAction.
  2. Tạo một biến sự kiện tuỳ chỉnh có tên là Event (Sự kiện).
  3. Tạo thẻ GTM có tiêu đề Button Pressed (Nhấn nút).
  4. Tạo một nút và thêm mã để theo dõi việc nhấn nút.

a. Tạo một biến lớp dữ liệu có tên là eventAction

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn một vùng chứa thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
  4. Trong Biến do người dùng xác định, hãy nhấp vào Mới.
  5. Nhấp vào Không có tiêu đề để nhập tiêu đề Hành động sự kiện.
  6. Chọn Biến lớp dữ liệu làm loại biến.
  7. Nhập eventAction làm Tên biến lớp dữ liệu.
  8. Nhấp vào Đặt giá trị mặc định.
  9. Nhập giá trị mặc định sự kiện không xác định.
  10. Nhấp vào Tạo biến.

b. Tạo biến sự kiện tuỳ chỉnh có tên là Event

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn vùng chứa dành cho thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Biến.
  4. Trong Biến do người dùng xác định, hãy nhấp vào Mới.
  5. Nhấp vào Untitled Variable (Biến chưa có tên) để nhập tên biến Event (Sự kiện).
  6. Chọn loại biến là Sự kiện tuỳ chỉnh.
  7. Nhấp vào Tạo biến.

c. Tạo thẻ GTM có tiêu đề Nút nhấn

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google.
  2. Chọn vùng chứa dành cho thiết bị di động.
  3. Trên thanh điều hướng bên trái, hãy nhấp vào Thẻ.
  4. Nhấp vào Mới.
  5. Nhấp vào Untitled Tag (Thẻ không tên) để nhập tên thẻ Button Pressed (Nút đã nhấn).
  6. Chọn sản phẩm Google Analytics.
  7. Chọn Mã theo dõi trong danh sách.
  8. Chọn Sự kiện làm Loại kênh.
  9. Chọn danh mục Sự kiện.
  10. Chọn Event Action (Thao tác sự kiện).
  11. Nhấp vào Tiếp tục.
  12. Trong mục Fire On (Kích hoạt khi), hãy chọn Any Event (Mọi sự kiện).
  13. Nhấp vào Tạo thẻ.

d. Tạo một nút và thêm mã để theo dõi việc nhấn nút

  1. Mở dự án Xcode.
  2. Mở Main.storyboard.
  3. Nhấp vào nút trên cùng bên phải trong thanh công cụ Xcode để mở khu vực tiện ích (thanh bên phải). Bảng phân cảnh và khu vực tiện ích
  4. Ở cuối khu vực tiện ích,
    nút màu xanh dương để mở thư viện đối tượng

    nhấp vào nút Show the Object library (Hiển thị thư viện đối tượng) (nút màu xanh dương):

    Cửa sổ bật lên của thư viện đối tượng
  5. Nhập nút vào hộp tìm kiếm.
    nút trong thư viện đối tượng
  6. Kéo Button (Nút) vào bảng phân cảnh rồi thả vào góc trên cùng bên trái.
    Kéo và thả nút vào bảng phân cảnh
  7. Nhấp vào nút trình chỉnh sửa trợ lý Nút Trợ lý chỉnh sửa trên thanh công cụ Xcode.
  8. Trong khi giữ phím Ctrl, hãy kéo nút này rồi thả vào cuối phần định nghĩa lớp ViewController.
    Kéo và thả nút để chuyển đến phần định nghĩa lớp ViewController
  9. Trong hộp thoại, hãy chọn kết nối Action (Hành động), nhập tên hàm buttonpressed rồi nhấp vào Connect (Kết nối).
    Tạo mã để xử lý sự kiện nhấn nút

    Thao tác này sẽ thêm hàm sau vào cuối phần định nghĩa lớp ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
}

    Hàm này được thực thi mỗi khi người dùng nhấn nút.

  10. Trong hàm buttonPressed, hãy thêm mã sau để đẩy sự kiện ButtonPressed 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 Product > Run (Sản phẩm > Chạy). Xcode sẽ tạo bản dựng và chạy ứng dụng:

Ảnh chụp màn hình ứng dụng đã chạy