このガイドでは、Swift で iOS アプリを作成および実装し、Google タグ マネージャー(GTM)で画面のオープンイベントとボタン押下イベントをトラッキングする方法について説明します。
1. 新しいプロジェクトを作成する
- Xcode を開きます。
- [新しい Xcode プロジェクトを作成] をクリックします。
- [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 を開きます。
- [File] > [New] > [File] をクリックします。
- [iOS] > [Source] で、[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] をクリックします。
- [All] と [Joind] を選択して、「bridging」を検索します。
- Objective-C ブリッジング ヘッダーを含む行の右側の列に「
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」という名前のデータレイヤー変数を作成します。
- 「スクリーン ビュー」という名前の GTM タグを作成します。
- スクリーン トラッキング コードを追加します。
a. トラッキング ID を格納する変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、変数名「トラッキング ID」を入力します。
- 変数のタイプとして [定数] を選択します。
- 変数の値として、トラッキング ID を入力します(
UA-XXXXXXXX-X
の形式、X
は数字)。UA-47605289-5
(削除予定)を使用します。 - [変数を作成] をクリックします。
b. screenName という名前のデータレイヤー変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、「スクリーン名」というタイトルを入力します。
- [データレイヤーの変数] を変数タイプとして選択します。
- [データレイヤーの変数名] に「screenName」と入力します。
- [デフォルト値を設定] をクリックします。
- デフォルト値の「unknown screen」を入力します。
- [変数を作成] をクリックします。
c. 「スクリーン ビュー」というタイトルの GTM タグを作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [タグ] をクリックします。
- [New] をクリックします。
- [Untitled Tag] をクリックして、タグ名「Screen View」を入力します。
- サービスとして [Google アナリティクス] を選択します。
- リストから [トラッキング ID] を選択します。
- [トラッキング タイプ] として [アプリビュー] を選択します。
- [詳細設定] をクリックします。
- [設定フィールド] をクリックします。
- [+ フィールドを追加] をクリックします。
- フィールド名 [screenName] と値 [Screen Name] を選択します。
- [Continue](続行)をクリックします。
- [配信するイベント] で [任意のイベント] を選択します。
- [タグを作成] をクリックします。
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 という名前のカスタム イベント変数を作成します。
- 「ボタンを押す」というタイトルの GTM タグを作成します。
- ボタンを作成し、ボタンが押されたことをトラッキングするためのコードを追加します。
a. eventAction という名前のデータレイヤー変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックして、「イベント アクション」というタイトルを入力します。
- [データレイヤーの変数] を変数タイプとして選択します。
- [データレイヤーの変数名] に「eventAction」と入力します。
- [デフォルト値を設定] をクリックします。
- デフォルト値の「不明なイベント」を入力します。
- [変数を作成] をクリックします。
b. 「Event」という名前のカスタム イベント変数を作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [無題の変数] をクリックし、変数名を「Event」と入力します。
- 変数タイプとして [カスタム イベント] を選択します。
- [変数を作成] をクリックします。
c. 「ボタン押下」というタイトルの GTM タグを作成する
- Google タグ マネージャー アカウントにログインします。
- モバイル向けのコンテナを選択します。
- 左側のナビゲーション バーで [タグ] をクリックします。
- [New] をクリックします。
- [無題のタグ] をクリックして、タグ名として「Button Pressed」と入力します。
- サービスとして [Google アナリティクス] を選択します。
- リストから [トラッキング ID] を選択します。
- [トラッキング タイプ] として [イベント] を選択します。
- [イベント] カテゴリを選択します。
- [イベント アクション] を選択します。
- [Continue](続行)をクリックします。
- [配信するイベント] で [任意のイベント] を選択します。
- [タグを作成] をクリックします。
d. ボタンを作成し、ボタンが押されたことをトラッキングするためのコードを追加する
- Xcode プロジェクトを開きます。
Main.storyboard
を開きます。- Xcode ツールバーの右上のボタンをクリックして、ユーティリティ エリア(右側のサイドバー)を開きます。
- ユーティリティ領域の下部で、
[オブジェクト ライブラリを表示] ボタン(青いボタン)をクリックします。
- 検索ボックスに「ボタン」と入力します。
- [ボタン] をストーリーボードにドラッグし、左上にドロップします。
- Xcode ツールバーのアシスタント エディタ ボタン をクリックします。
- Ctrl キーを押しながら、ボタンを
ViewController
クラス定義の一番下までドラッグ&ドロップします。
- ダイアログで [Action connection] を選択し、関数名として「buttonPressed」を入力して、[Connect] をクリックします。
これにより、
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 がアプリをビルドして実行します。