Panduan Memulai untuk Swift

Panduan ini menjelaskan cara membuat dan menerapkan aplikasi iOS di Swift untuk melacak peristiwa layar terbuka dan tombol ditekan 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 Berikutnya.
  5. Beri nama project Anda dan pilih opsi tambahan untuk project tersebut. Nama project dan nama aplikasi Anda akan sama seperti nama produk.
    Masukkan nama produk dan opsi lainnya
  6. Klik Berikutnya.
  7. Pilih lokasi project (direktori).
  8. Klik Buat.

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 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 akan membuat ruang kerja GtmSwiftTutorial.xcworkspace. Mulai sekarang, gunakan ruang kerja ini untuk mengembangkan aplikasi GtmSwiftTutorial.

3. Menambahkan header jembatan untuk library Objective-C

Untuk membuat file header penghubungan:

  1. Buka Xcode.
  2. Klik File > New > File.
  3. Di bagian iOS > Source, pilih Header File.
  4. Klik Berikutnya.
  5. Masukkan nama file header BridgingHeader.h.
    Membuat file header penghubung
  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.
    Klik Setelan Build
  3. Pilih Semua dan Gabungan, lalu telusuri bridging.
    Jembatan penelusuran
  4. Di kolom kanan baris yang berisi Objective-C Bridging Header, masukkan BridgingHeader.h.
    Menambahkan BridgingHeader.h sebagai Header Jembatan Objective-C

4. Menambahkan container default ke project

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 menu.
  4. Klik Tindakan > Download di versi penampung yang dipilih.
    5. Nama file yang didownload adalah ID penampung, misalnya, GTM-PT3L9Z.

Untuk menambahkan biner penampung default ke project Anda:

  1. Buka Xcode.
  2. Klik ikon Finder di Dock.
  3. Klik folder Downoloads.
  4. Tarik file biner penampung di folder Downloads dan lepaskan ke folder root project Xcode Anda.
  1. Di Xcode, buka file AppDelegate.swift.
  2. Buat 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 tersebut.

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

Untuk melacak peristiwa pembukaan layar:

  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. Membuat variabel untuk menyimpan ID pelacakan

  1. Login ke akun Google Tag Manager Anda.
  2. Pilih penampung seluler.
  3. Di menu navigasi sebelah kiri, klik Variabel.
  4. Di bagian Variabel Buatan Pengguna, klik Baru.
  5. Klik Untitled Variable untuk memasukkan nama variabel Tracking ID.
  6. Pilih Konstanta sebagai jenis variabel.
  7. Masukkan ID pelacakan (dalam bentuk UA-XXXXXXXX-X, dengan X adalah angka) 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 Anda.
  2. Pilih penampung seluler.
  3. Di menu navigasi sebelah kiri, klik Variabel.
  4. Di bagian Variabel Buatan Pengguna, klik Baru.
  5. Klik Untitled Variable untuk memasukkan judul Screen Name.
  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 unknown screen.
  10. Klik Buat Variabel.

c. Membuat tag GTM berjudul Tampilan Layar

  1. Login ke akun Google Tag Manager Anda.
  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 More settings.
  10. Klik Kolom untuk Ditetapkan.
  11. Klik + Tambahkan Kolom.
  12. Pilih nama kolom screenName dan nilainya Nama Layar.
  13. Klik Lanjutkan.
  14. Di bagian Fire On, pilih Any Event.
  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. Melacak peristiwa tombol ditekan

Untuk melacak peristiwa tombol ditekan:

  1. Buat variabel lapisan data bernama eventAction.
  2. Buat variabel peristiwa kustom bernama Peristiwa.
  3. Buat tag GTM berjudul Tombol Ditekan.
  4. Buat tombol dan tambahkan kode untuk melacak bahwa 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 unknown event.
  10. Klik Buat Variabel.

b. Buat variabel peristiwa kustom bernama Peristiwa

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

c. Buat tag GTM berjudul Tombol Ditekan

  1. Login ke akun Google Tag Manager Anda.
  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 Lanjutkan.
  12. Di bagian Fire On, pilih Any Event.
  13. Klik Buat Tag.

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 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 Tampilkan Daftar objek (tombol biru):

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

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

    @IBAction func buttonPressed(sender: AnyObject) {
}

    Fungsi ini dieksekusi setiap kali tombol ditekan.

  10. Dalam fungsi buttonPressed, tambahkan kode berikut untuk mendorong 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 membangun dan menjalankan aplikasi:

Screenshot aplikasi yang diluncurkan