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 một ứng dụng iOS trong Swift để theo dõi sự kiện mở màn hình và sự kiện nhấn nút bằng Thẻ Google Người quản lý (GTM).

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

1. Mở Xcode.
2. Nhấp vào Tạo dự án Xcode mới.
3. Chọn Single View Application (Ứng dụng chế độ xem duy nhất).
4. Nhấp vào Tiếp theo.
5. Đặt tên cho dự án và chọn các lựa chọn khác cho dự án đó. Tên dự án và tên ứng dụng sẽ giống với tên sản phẩm.
   
6. Nhấp vào Tiếp theo.
7. Chọn một vị trí (thư mục) dự án.
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 Xcode.
2. Trong dòng lệnh, hãy chạy lệnh sau để cài đặt Cocoapod:

   $ sudo gem install cocoapods

3. Thay đổi sang thư mục dự án của bạ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 huỷ bình luận use_frameworks! và thêm pod 'GoogleTagManager' vào mục tiêu:

# 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 Trình quản lý thẻ của Google (GTM) vào dự á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 các thư viện Target-C

Cách tạo tệp tiêu đề cầu nối:

1. Mở Xcode.
2. Nhấp vào File > (Tệp >) Mới > Tệp.
3. Trong iOS > Source (Tệp tiêu đề), 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.
   
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 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.
   
3. Chọn Tất cả và Kết hợp, rồi tìm mục cầu nối.
   
4. Ở 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.
   

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 của vùng chứa thiết bị di động:

1. Đăng nhập vào của bạn 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. 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 vùng chứa đã chọn .
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 ứng dụng.
3. Nhấp vào thư mục Downoloads.
4. Kéo tệp nhị phân của vùng chứa trong thư mục Downloads rồi thả tệp đó vào thư mục gốc của dự án Xcode của bạn.

5. Liên kết Trình quản lý thẻ của Google với ứng dụng của bạn

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ẽ nhận được 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 một 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 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 Trình quản lý thẻ của Google. tài khoản.
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 Biến không có tiêu đề để nhập tên biến Mã theo dõi.
6. Chọn loại biến là Hằng số.
7. Nhập mã theo dõi (ở dạng UA-XXXXXXXX-X, với X là một chữ số) là 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 là screenName

1. Đăng nhập vào Trình quản lý thẻ của Google. tài khoản.
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 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 Set Default Value (Đặ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 đề Lượt xem màn hình

1. Đăng nhập vào Trình quản lý thẻ của Google. tài khoản.
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 Google Analytics sản phẩm.
7. Chọn Mã theo dõi trong danh sách.
8. Chọn App View (Chế độ xem ứng dụng) làm Track Type (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 Kích hoạt, hãy chọn Bất kỳ sự kiện nào.
15. Nhấp vào Tạo thẻ.

Xem ảnh chụp màn hình của quá trình tạo thẻ Trình quản lý thẻ của Google (GTM) Chế độ xem màn hình.

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 đến 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 được 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 biến sự kiện tuỳ chỉnh có tên là Sự kiện.
3. Tạo thẻ GTM có tiêu đề Button nhấn.
4. Tạo một nút rồi 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 Trình quản lý thẻ của Google. tài khoản.
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 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 Set Default Value (Đặ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 Trình quản lý thẻ của Google. tài khoản.
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 Biến không có tiêu đề để nhập tên biến 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 Trình quản lý thẻ của Google. tài khoản.
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ẻ Đã nhấn nút.
6. Chọn Google Analytics sản phẩm.
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, hãy chọn Bất kỳ sự kiện nào.
13. Nhấp vào Tạo thẻ.

Xem ảnh chụp màn hình của quá trình tạo thẻ Trình quản lý thẻ của Google (GTM) đã nhấn nút.

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ở khu vực tiện ích (thanh bên phải).
4. Ở phía dưới cùng của khu tiện ích,
   

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

   
5. Nhập button (nút) vào hộp tìm kiếm.
   
6. Kéo Nút vào bảng phân cảnh và thả nút đó vào bảng phân cảnh góc bên trái.
   
7. Nhấp vào nút trình chỉnh sửa của Trợ lý trên thanh công cụ Xcode.
8. Trong khi nhấn giữ phím Ctrl, hãy kéo và thả nút vào cuối phần định nghĩa lớp ViewController.
   
9. Trong hộp thoại, hãy chọn kết nối Thao tác, rồi nhập tên hàm buttonPressed rồi nhấp vào buttonPressed (Kết nối).
   

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

   @IBAction func buttonPressed(sender: AnyObject) {
   }

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

10. Trong hàm buttonPressed, hãy thêm mã sau vào đẩ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: