このガイドでは、Swift で iOS アプリを作成して実装し、Google タグ マネージャー(GTM)で画面の開閉イベントとボタンの押下イベントをトラッキングする方法について説明します。
1. 新しいプロジェクトを作成
- Xcode を開きます。
- [Create a new Xcode project] をクリックします。
- [Single View Application] を選択します。
- [次へ] をクリックします。
- プロジェクトに名前を付け、追加オプションを選択します。プロジェクト名とアプリ名はプロダクト名と同じになります。
- [次へ] をクリックします。
- プロジェクトの場所(ディレクトリ)を選択します。
- [作成] をクリックします。
2. Google タグ マネージャーの依存関係をインストールする
- Xcode を終了します。
- ターミナルで次のコマンドを実行して Cocoapods をインストールします。
$ sudo gem install cocoapods
- プロジェクトのディレクトリに移動します。
- 次のコマンドを実行して、
Podfile
という名前のファイルを作成します。$ pod init
Podfile
で、use_frameworks!
のコメントを解除し、ターゲットにpod 'GoogleTagManager'
を追加します。- 次のコマンドを実行して、Google タグ マネージャー(GTM)の依存関係をダウンロードしてインストールします。
$ pod install
このコマンドは、ワークスペース
GtmSwiftTutorial.xcworkspace
も作成します。以降、このワークスペースを使用してGtmSwiftTutorial
アプリを開発します。
# Uncomment this line if you're using Swift use_frameworks! target 'GtmSwiftTutorial' do pod 'GoogleTagManager' end
3. Objective-C ライブラリのブリッジング ヘッダーを追加する
ブリッジング ヘッダー ファイルを作成するには:
- Xcode を開きます。
- [ファイル] > [新規] > [ファイル] をクリックします。
- [iOS] > [ソース] で、[Header File] を選択します。
- [次へ] をクリックします。
- ヘッダー ファイル名
BridgingHeader.h
を入力します。
- [作成] をクリックします。
- ヘッダー ファイルに次の
import
ステートメントを追加します。#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 */
ビルド設定に Objective-C ブリッジング ヘッダーを追加するには:
- Xcode でプロジェクトをクリックします。
- エディタ領域で [Build Settings] をクリックします。
- [すべて] と [統合] を選択し、[ブリッジング] を検索します。
- [Objective-C Bridging Header] を含む行の右側の列に「
BridgingHeader.h
」と入力します。
4. プロジェクトにデフォルト コンテナを追加する
デフォルトのコンテナをプロジェクトに追加する前に、モバイル コンテナ バイナリをダウンロードします。
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- メニューバーの [バージョン] をクリックします。
- 選択したコンテナ バージョンで [アクション] > [ダウンロード] をクリックします。
GTM-PT3L9Z
)。デフォルトのコンテナ バイナリをプロジェクトに追加するには:
- Xcode を開きます。
- Dock の Finder アイコンをクリックします。
Downoloads
フォルダをクリックします。- コンテナのバイナリ ファイルを
Downloads
フォルダにドラッグし、Xcode プロジェクトのルートフォルダにドロップします。
5. Google タグ マネージャーをアプリにリンクする
- Xcode でファイル
AppDelegate.swift
を開きます。 AppDelegate
クラスがTAGContainerOpenerNotifier
クラスを拡張します。import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier { // ... }
クラスを拡張すると、
Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier'
エラーが発生します。次のステップでこのエラーを修正します。AppDelegate
クラス定義の一番下に次の関数を追加します。func containerAvailable(container: TAGContainer!) { container.refresh() }
application
関数で、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. 画面開くイベントをトラッキングする
画面の開くイベントをトラッキングするには:
- トラッキング ID を格納する変数を作成します。
- screenName というデータレイヤー変数を作成します。
- [Screen View] というタイトルの GTM タグを作成します。
- 画面トラッキング コードを追加します。
a. トラッキング ID を格納する変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、変数名として「トラッキング ID」を入力します。
- 変数タイプとして [定数] を選択します。
- 変数の値としてトラッキング ID(
UA-XXXXXXXX-X
の形式、X
は数字)を入力します。UA-47605289-5
(削除)を使用します。 - [変数を作成] をクリックします。
b. screenName という名前のデータレイヤー変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [Untitled Variable] をクリックして、タイトル「Screen Name」を入力します。
- [データレイヤーの変数] を変数タイプとして選択します。
- [データレイヤーの変数名] に「screenName」と入力します。
- [デフォルト値を設定する] をクリックします。
- デフォルト値「unknown screen」を入力します。
- [変数を作成] をクリックします。
c. 「Screen View」というタイトルの GTM タグを作成します。
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [タグ] をクリックします。
- [新規] をクリックします。
- [Untitled Tag] をクリックして、タグ名「Screen View」を入力します。
- サービスとして [Google アナリティクス] を選択します。
- リストから [トラッキング ID] を選択します。
- [トラッキング タイプ] として [アプリビュー] を選択します。
- [詳細設定] をクリックします。
- [設定フィールド] をクリックします。
- [+ フィールドを追加] をクリックします。
- フィールド名 screenName とその値 Screen Name を選択します。
- [続行] をクリックします。
- [Fire On] で [Any Event] を選択します。
- [タグを作成] をクリックします。
d. 画面トラッキング コードを追加する
- Xcode でファイル
ViewController.swift
を開きます。 ViewController
クラス内にdataLayer
という変数を定義します。var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
viewDidLoad()
関数で、OpenScreen
イベントをデータレイヤにプッシュします。dataLayer.push(["event": "OpenScreen", "screenName": "Home Screen"])
ViewController
クラスの定義は次のようになります。
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. ボタンが押されたイベントをトラッキングする
ボタンが押されたイベントをトラッキングするには:
- eventAction という名前のデータレイヤー変数を作成します。
- Event という名前のカスタム イベント変数を作成します。
- [Button Pressed] というタイトルの GTM タグを作成します。
- ボタンを作成し、ボタンが押されたことを追跡するコードを追加します。
a. eventAction という名前のデータレイヤー変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、タイトル「イベント アクション」を入力します。
- [データレイヤーの変数] を変数タイプとして選択します。
- [データレイヤーの変数名] に「eventAction」と入力します。
- [デフォルト値を設定] をクリックします。
- デフォルト値に「不明なイベント」と入力します。
- [変数を作成] をクリックします。
b. Event という名前のカスタム イベント変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、変数名を「Event」と入力します。
- 変数タイプとして [カスタム イベント] を選択します。
- [変数を作成] をクリックします。
c. [Button Pressed] というタイトルの GTM タグを作成します。
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [タグ] をクリックします。
- [新規] をクリックします。
- [Untitled Tag] をクリックして、タグ名 Button Pressed を入力します。
- サービスとして [Google アナリティクス] を選択します。
- リストから [トラッキング ID] を選択します。
- [トラッキング タイプ] として [イベント] を選択します。
- [イベント] カテゴリを選択します。
- [イベント アクション] を選択します。
- [続行] をクリックします。
- [Fire On] で [Any Event] を選択します。
- [タグを作成] をクリックします。
d. ボタンを作成し、ボタンが押されたことを追跡するコードを追加する
- Xcode プロジェクトを開きます。
Main.storyboard
を開きます。- Xcode ツールバーの右端のボタンをクリックして、ユーティリティ エリア(右側のサイドバー)を開きます。
- ユーティリティ領域の下部で、
[オブジェクト ライブラリを表示] ボタン(青いボタン)をクリックします。
- 検索ボックスに「button」と入力します。
- [ボタン] をストーリーボードにドラッグし、左上にドロップします。
- Xcode ツールバーのアシスタント エディタ ボタン をクリックします。
- Ctrl キーを押しながらボタンをドラッグし、
ViewController
クラス定義の一番下にドロップします。
- ダイアログで [アクション] 接続を選択し、関数名 buttonPressed を入力して、[接続] をクリックします。
これにより、
ViewController
クラス定義の末尾に次の関数が追加されます。@IBAction func buttonPressed(sender: AnyObject) { }
この関数は、ボタンが押されるたびに実行されます。
buttonPressed
関数に次のコードを追加して、ButtonPressed
イベントをデイレイヤにプッシュします。@IBAction func buttonPressed(sender: AnyObject) { dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"]) }
8. アプリをビルドして実行する
Xcode で、[Product] > [Run] をクリックします。Xcode はアプリをビルドして実行します。