Panduan Memulai untuk Swift

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

1. Membuat project baru

  1. Buka Xcode. membuat project baru
  2. Klik Create a new Xcode project.
  3. Pilih Single View Application. pilih aplikasi tampilan tunggal
  4. Klik Next.
  5. Beri nama project Anda dan pilih opsi tambahan untuk project tersebut. Nama project dan nama aplikasi Anda akan sama dengan nama produk.
    Masukkan nama produk dan opsi lainnya
  6. Klik Next.
  7. Pilih lokasi proyek (direktori).
  8. Klik Create.

2. Menginstal dependensi Google Tag Manager

  1. Keluar dari Xcode.
  2. Di terminal, jalankan perintah berikut untuk menginstal Cocoapods: 
    $ 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 use_frameworks! dan tambahkan pod 'GoogleTagManager' ke target:
    6. # Uncomment this line if you're using Swift
use_frameworks!

target 'GtmSwiftTutorial' do
  pod 'GoogleTagManager'
end
  6. Jalankan perintah berikut untuk mendownload dan menginstal dependensi Google Tag Manager (GTM) 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 penghubung:

  1. Buka Xcode.
  2. Klik File > New > File.
  3. Di bagian iOS > Source, pilih Header File.
  4. Klik Next.
  5. Masukkan nama file header BridgingHeader.h.
    Membuat file header penghubung
  6. Klik Create.
  7. Tambahkan pernyataan import berikut 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 bridging Objective-C di setelan build:

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

4. Menambahkan penampung default ke project Anda

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

  1. Login ke akun Google Tag Manager.
  2. Pilih penampung seluler.
  3. Klik Versi di panel menu.
  4. Klik Tindakan > Download di versi penampung yang dipilih.
    5. 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 Dok.
  3. Klik folder Downoloads.
  4. Tarik file biner container dalam folder Downloads dan lepaskan ke folder root project Xcode Anda.
  1. Di Xcode, buka file AppDelegate.swift.
  2. Minta class AppDelegate memperluas class TAGContainerOpenerNotifier: 
    import UIKit

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

    Setelah memperluas class, Anda akan mendapatkan error Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'. Langkah berikut akan memperbaiki error ini.

  3. Tambahkan fungsi berikut ke bagian bawah definisi class AppDelegate: 
    func containerAvailable(container: TAGContainer!) {
  container.refresh()
}
  4. Dalam 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. Melacak 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 Tampilan Layar.
  4. Tambahkan kode pelacakan layar.

a. Buat variabel untuk menyimpan ID pelacakan

  1. Login ke akun Google Tag Manager.
  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 akun Google Tag Manager.
  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 dikenal.
  10. Klik Buat Variabel.

c. Membuat tag GTM berjudul Tampilan Layar

  1. Login ke akun Google Tag Manager.
  2. Pilih penampung seluler.
  3. Di menu navigasi kiri, klik Tag.
  4. Klik Baru.
  5. Klik Tag Tanpa Judul untuk memasukkan nama tag Screen View.
  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 Continue.
  14. Di bagian Aktifkan Pada, pilih Semua Peristiwa.
  15. Klik Buat Tag.

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. Pada 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. Lacak peristiwa penekanan tombol

Untuk melacak peristiwa penekanan 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 apakah tombol ditekan.

a. Buat variabel lapisan data bernama eventAction

  1. Login ke akun Google Tag Manager.
  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 yang tidak diketahui.
  10. Klik Buat Variabel.

b. Buat variabel peristiwa kustom bernama Peristiwa

  1. Login ke akun Google Tag Manager.
  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 akun Google Tag Manager.
  2. Pilih penampung seluler.
  3. Di menu navigasi kiri, klik Tag.
  4. Klik Baru.
  5. Klik Untitled Tag untuk memasukkan nama tag Button Pressed.
  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 Continue.
  12. Di bagian Aktifkan Pada, pilih Semua Peristiwa.
  13. Klik Buat Tag.

d. Buat tombol dan tambahkan kode untuk melacak bahwa tombol ditekan

  1. Buka project Xcode Anda.
  2. Buka Main.storyboard.
  3. Klik tombol paling kanan atas di toolbar Xcode untuk membuka area utilitas (sidebar kanan). Papan cerita dan area utilitas
  4. Di bagian bawah area utilitas,
    tombol biru untuk membuka library objek

    klik tombol Show the Object library (tombol biru):

    Jendela pop-up library objek
  5. Masukkan button di kotak penelusuran.
    tombol di library objek
  6. Tarik Button ke storyboard dan lepaskan di sudut kiri atas.
    Seret dan lepas tombol ke {i>storyboard<i}
  7. Klik tombol editor asisten Tombol editor Asisten di toolbar Xcode.
  8. Sambil menahan tombol Ctrl, tarik tombol dan lepaskan ke bagian bawah definisi class ViewController.
    Tarik lalu lepas tombol ke definisi class ViewController
  9. Pada dialog, pilih koneksi Action, masukkan nama fungsi buttonPressed, dan klik Connect.
    Membuat kode untuk menangani peristiwa yang ditekan tombol

    Tindakan ini akan menambahkan fungsi berikut ke akhir definisi class ViewController:

    @IBAction func buttonPressed(sender: AnyObject) {
}

    Fungsi dieksekusi setiap kali tombol ditekan.

  10. Pada fungsi buttonPressed, tambahkan kode berikut untuk mengirim 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 > Run. Xcode akan mem-build dan menjalankan aplikasi:

Screenshot aplikasi yang diluncurkan