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 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

  1. Mở Xcode. tạo một dự án mới
  2. Nhấp vào Tạo dự án Xcode mới.
  3. Chọn Single View Application (Ứng dụng khung hiển thị đơn). chọn ứng dụng khung hiển thị một lần
  4. Nhấp vào Tiếp theo.
  5. Đặ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 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í dự án (thư mục).
  8. 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

  1. Thoát khỏi 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 đối với thư mục dự án.
  4. Chạy lệnh sau để tạo một tệp có tên Podfile: 
    $ pod init
  5. Trong Podfile, hãy huỷ nhận xét 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 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ụ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 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 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:

  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 chỉnh sửa.
    Nhấp vào Build Settings (Cài đặt bản dựng)
  3. Chọn All (Tất cả) và Composable (Kết hợp) rồi tìm Cầu nối.
    Tìm kiếm cầu nối
  4. 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.
    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 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:

  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 cho thiết bị di động.
  3. Nhấp vào Phiên bản ở 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ên thanh Dock.
  3. Nhấp vào thư mục Downoloads.
  4. 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.
  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 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 biến để lưu trữ mã theo dõi.
  2. Tạo biến lớp dữ liệu có tên là screenName.
  3. Tạo một thẻ GTM có tiêu đề Lượt xem màn hình.
  4. Thêm mã theo dõi màn hình.

a. Tạo 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 của bạn.
  2. Chọn một vùng chứa 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 Biến không có tiêu đề để nhập tên biến Mã theo dõi.
  6. Chọn 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 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 của bạn.
  2. Chọn một vùng chứa 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 Biến không có tiêu đề để nhập tiêu đề Tên màn hình.
  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 một thẻ GTM có tiêu đề là Screen View (Lượt xem màn hình)

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
  2. Chọn một vùng chứa 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 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 App View (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 (Tên màn hình).
  13. Nhấp vào Tiếp tục.
  14. Trong mục Kích hoạt trên, hãy chọn Sự kiện bất kỳ.
  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 biến có tên 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 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:

  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.
  3. Tạo một 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 người dùng nhấn nút đó.

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

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
  2. Chọn một vùng chứa 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 Biến 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à Sự kiện

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
  2. Chọn một vùng chứa 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 Biến không có tiêu đề để nhập tên biến là Sự kiện.
  6. Chọn Sự kiện tuỳ chỉnh làm loại biến.
  7. Nhấp vào Tạo biến.

c. Tạo thẻ GTM có tiêu đề Button Pressed

  1. Đăng nhập vào tài khoản Trình quản lý thẻ của Google của bạn.
  2. Chọn một vùng chứa 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 Thẻ không có tiêu đề để nhập tên thẻ Nút được 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 theo dõi.
  9. Chọn danh mục Sự kiện.
  10. Chọn Hành động sự kiện.
  11. Nhấp vào Tiếp tục.
  12. Trong mục Kích hoạt trên, hãy chọn Sự kiện bất kỳ.
  13. 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 đó

  1. Mở dự án Xcode của bạn.
  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ở vùng tiện ích (thanh bên bên phải). Bảng câu chuyện và khu vực tiện ích
  4. Ở cuối vùng tiện ích,
    nút màu xanh dương để mở thư viện đối tượng

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

    Cửa sổ bật lên thư viện đối tượng
  5. Nhập button vào hộp tìm kiếm.
    Nút trong thư viện đối tượng
  6. 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.
    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ình chỉnh sửa của Trợ lý trên thanh công cụ Xcode.
  8. 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.
    Kéo và thả nút đó vào 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 (Nhấn nút) rồi nhấp vào Connect (Kết nối).
    Tạo mã để xử lý sự kiện được nhấn nút

    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.

  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 Sản phẩm > Chạy. Xcode sẽ tạo và chạy ứng dụng:

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