Panduan Memulai untuk Swift

Panduan ini menjelaskan cara membuat dan menerapkan aplikasi iOS di Swift untuk melacak peristiwa saat layar dibuka dan penekanan tombol dengan Tag Google Pengelola (GTM).

1. Membuat project baru

1. Buka Xcode.
2. Klik Create a new Xcode project.
3. Pilih Single View Application.
4. Klik Berikutnya.
5. Beri nama project Anda dan pilih opsi tambahan. Nama proyek dan nama aplikasi akan sama dengan nama produk.
   
6. Klik Berikutnya.
7. Pilih lokasi (direktori) project.
8. Klik Buat.

2. Menginstal dependensi Google Tag Manager

1. Keluar dari Xcode.
2. Di terminal, jalankan perintah berikut untuk menginstal Cocoapod:

   $ sudo gem install cocoapods
   

3. Ubah ke direktori project Anda.
4. Jalankan perintah berikut untuk membuat file bernama Podfile:

   $ pod init
   

5. Di Podfile, hapus tanda komentar di use_frameworks! dan menambahkan pod 'GoogleTagManager' ke target:

# Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end

6. Jalankan perintah berikut untuk mendownload dan menginstal Google Tag Manager (GTM) dependensi ke project Anda:

   $ pod install
   

   Perintah ini juga membuat ruang kerja GtmSwiftTutorial.xcworkspace. Mulai sekarang, gunakan ruang kerja ini untuk mengembangkan aplikasi GtmSwiftTutorial.

3. Menambahkan header penghubung untuk library Objective-C

Untuk membuat file header penghubungan:

1. Buka Xcode.
2. Klik File > Baru > File.
3. Di bagian iOS > Source, pilih Header File.
4. Klik Berikutnya.
5. Masukkan nama file header BridgingHeader.h.
   
6. Klik Buat.
7. Tambahkan pernyataan import ini ke file header:

   #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 */
   

Untuk menambahkan header penghubung Objective-C pada setelan build:

1. Di Xcode, klik project Anda.
2. Klik Build Settings di area editor.
   
3. Pilih All dan Combined, lalu telusuri bridging.
   
4. Di kolom sebelah kanan baris yang berisi Objective-C Bridging Header, masukkan BridgingHeader.h.
   

4. Menambahkan container default ke project

Sebelum menambahkan penampung default ke project, download biner penampung seluler:

1. Masuk ke Anda akun Google Tag Manager Anda.
2. Pilih penampung seluler.
3. Klik Versi di panel menu.
4. Klik Tindakan > Download di penampung yang dipilih .
Nama file yang didownload adalah ID penampung, misalnya GTM-PT3L9Z.

Untuk menambahkan biner container default ke project Anda:

1. Buka Xcode.
2. Klik ikon Finder di Dock.
3. Klik folder Downoloads.
4. Tarik file biner container di folder Downloads, lalu lepaskan ke folder root project Xcode Anda.

5. Menautkan Google Tag Manager ke aplikasi

1. Di Xcode, buka file AppDelegate.swift.
2. Minta class AppDelegate memperluas Class TAGContainerOpenerNotifier:

   import UIKit
   
   @UIApplicationMain
   class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
     // ...
   }
   

   Setelah memperluas kelas, Anda akan mendapatkan Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' {i>error<i}. Langkah berikut akan memperbaiki error tersebut.

3. Tambahkan fungsi berikut ke bagian bawah definisi class AppDelegate:

   func containerAvailable(container: TAGContainer!) {
     container.refresh()
   }
   

4. Di fungsi application, tambahkan kode berikut sebelum pernyataan 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. Lacak peristiwa layar dibuka

Untuk melacak peristiwa layar dibuka:

1. Buat variabel untuk menyimpan ID pelacakan.
2. Buat variabel lapisan data bernama screenName.
3. Buat tag GTM berjudul Screen View.
4. Tambahkan kode pelacakan layar.

a. Membuat variabel untuk menyimpan ID pelacakan

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi sebelah kiri, klik Variabel.
4. Di bagian Variabel Buatan Pengguna, klik Baru.
5. Klik Variabel Tanpa Judul untuk memasukkan nama variabel ID Pelacakan.
6. Pilih Konstanta sebagai jenis variabel.
7. Masukkan ID pelacakan (dalam bentuk UA-XXXXXXXX-X, dengan X adalah digit) sebagai nilai variabel.
   Gunakan UA-47605289-5 (untuk dihapus).
8. Klik Buat Variabel.

b. Buat variabel lapisan data bernama screenName

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi sebelah kiri, klik Variabel.
4. Di bagian Variabel Buatan Pengguna, klik Baru.
5. Klik Variabel Tanpa Judul untuk memasukkan judul Nama Layar.
6. Pilih Variabel Lapisan Data sebagai jenis variabel.
7. Masukkan screenName sebagai Nama Variabel Lapisan Data.
8. Klik Tetapkan Nilai Default.
9. Masukkan nilai default layar tidak diketahui.
10. Klik Buat Variabel.

c. Membuat tag GTM berjudul Tampilan Layar

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi kiri, klik Tag.
4. Klik Baru.
5. Klik Tag Tanpa Judul untuk memasukkan nama tag Tampilan Layar.
6. Pilih produk Google Analytics.
7. Pilih ID Pelacakan dari daftar.
8. Pilih Tampilan Aplikasi sebagai Jenis Pelacakan.
9. Klik Setelan lainnya.
10. Klik Kolom untuk Ditetapkan.
11. Klik + Tambahkan Kolom.
12. Pilih nama kolom screenName dan nilainya Screen Name.
13. Klik Lanjutkan.
14. Di bagian Aktifkan Aktif, pilih Peristiwa Apa Pun.
15. Klik Buat Tag.

Lihat screenshot pembuatan tag GTM Tampilan Layar.

d. Tambahkan kode pelacakan layar

1. Buka file ViewController.swift di Xcode.
2. Tentukan variabel bernama dataLayer di dalam Class ViewController:

   var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
   

3. Dalam fungsi viewDidLoad(), kirim Peristiwa OpenScreen ke lapisan data:

   dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
   

Definisi class ViewController akan terlihat seperti ini:

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. Peristiwa penekanan tombol lacak

Untuk melacak peristiwa yang ditekan tombol:

1. Buat variabel lapisan data bernama eventAction.
2. Buat variabel peristiwa kustom bernama Peristiwa.
3. Buat tag GTM berjudul Button Pressed.
4. Buat tombol dan tambahkan kode untuk melacak bahwa tombol ditekan.

a. Buat variabel lapisan data bernama eventAction

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi sebelah kiri, klik Variabel.
4. Di bagian Variabel Buatan Pengguna, klik Baru.
5. Klik Variabel Tanpa Judul untuk memasukkan judul Tindakan Peristiwa.
6. Pilih Variabel Lapisan Data sebagai jenis variabel.
7. Masukkan eventAction sebagai Nama Variabel Lapisan Data.
8. Klik Tetapkan Nilai Default.
9. Masukkan nilai default peristiwa tidak diketahui.
10. Klik Buat Variabel.

b. Buat variabel peristiwa kustom bernama Peristiwa

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi sebelah kiri, klik Variabel.
4. Di bagian Variabel Buatan Pengguna, klik Baru.
5. Klik Variabel Tanpa Judul untuk memasukkan nama variabel Peristiwa.
6. Pilih Peristiwa Kustom sebagai jenis variabel.
7. Klik Buat Variabel.

c. Membuat tag GTM berjudul Tombol Ditekan

1. Login ke Google Tag Manager menggunakan akun layanan.
2. Pilih penampung seluler.
3. Di menu navigasi kiri, klik Tag.
4. Klik Baru.
5. Klik Tag Tanpa Judul untuk memasukkan nama tag Tombol Ditekan.
6. Pilih produk Google Analytics.
7. Pilih ID Pelacakan dari daftar.
8. Pilih Peristiwa sebagai Jenis Pelacakan.
9. Pilih kategori Peristiwa.
10. Pilih Tindakan Peristiwa.
11. Klik Lanjutkan.
12. Di bagian Aktifkan Aktif, pilih Peristiwa Apa Pun.
13. Klik Buat Tag.

Lihat screenshot pembuatan tag GTM Tombol Ditekan.

d. Membuat tombol dan menambahkan kode untuk melacak bahwa tombol ditekan

1. Buka project Xcode Anda.
2. Buka Main.storyboard.
3. Klik tombol paling kanan atas di {i>toolbar<i} Xcode untuk membuka area utilitas ({i>sidebar<i} kanan).
4. Di bagian bawah area utilitas,
   

   klik tombol Show the Object library (tombol biru):

   
5. Masukkan button di kotak penelusuran.
   
6. Tarik Button ke storyboard dan lepaskan di bagian atas di pojok kiri atas.
   
7. Klik tombol asisten editor di toolbar Xcode.
8. Sambil menahan tombol Ctrl, tarik tombol, lalu lepaskan di bagian bawah definisi class ViewController.
   
9. Dalam dialog, pilih koneksi Action, masukkan nama fungsi buttonPressed, lalu klik Connect.
   

   Ini menambahkan fungsi berikut ke akhir dari Definisi class ViewController:

   @IBAction func buttonPressed(sender: AnyObject) {
   }
   

   Fungsi ini dieksekusi setiap kali tombol ditekan.

10. Dalam fungsi buttonPressed, tambahkan kode berikut ke kirim peristiwa ButtonPressed ke lapisan hari:

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

8. Membuat dan menjalankan aplikasi

Di Xcode, klik Product > Jalankan. Xcode akan membangun dan menjalankan aplikasi: