Swift スタートガイド

このガイドでは、Swift で iOS アプリを作成して実装し、Google タグ マネージャー(GTM)で画面の開閉イベントとボタンの押下イベントをトラッキングする方法について説明します。

1. 新しいプロジェクトを作成

  1. Xcode を開きます。新しいプロジェクトを
  2. [Create a new Xcode project] をクリックします。
  3. [Single View Application] を選択します。シングルビュー アプリケーションを選択
  4. [次へ] をクリックします。
  5. プロジェクトに名前を付け、追加オプションを選択します。プロジェクト名とアプリ名はプロダクト名と同じになります。
    商品名とその他のオプションを入力する
  6. [次へ] をクリックします。
  7. プロジェクトの場所(ディレクトリ)を選択します。
  8. [作成] をクリックします。

2. Google タグ マネージャーの依存関係をインストールする

  1. Xcode を終了します。
  2. ターミナルで次のコマンドを実行して Cocoapods をインストールします。
    $ sudo gem install cocoapods
    
  3. プロジェクトのディレクトリに移動します。
  4. 次のコマンドを実行して、Podfile という名前のファイルを作成します。
    $ pod init
    
  5. Podfile で、use_frameworks! のコメントを解除し、ターゲットに pod 'GoogleTagManager' を追加します。
  6. # Uncomment this line if you're using Swift
    use_frameworks!
    
    target 'GtmSwiftTutorial' do
      pod 'GoogleTagManager'
    end
    
  7. 次のコマンドを実行して、Google タグ マネージャー(GTM)の依存関係をダウンロードしてインストールします。
    $ pod install
    

    このコマンドは、ワークスペース GtmSwiftTutorial.xcworkspace も作成します。以降、このワークスペースを使用して GtmSwiftTutorial アプリを開発します。

3. Objective-C ライブラリのブリッジング ヘッダーを追加する

ブリッジング ヘッダー ファイルを作成するには:

  1. Xcode を開きます。
  2. [ファイル] > [新規] > [ファイル] をクリックします。
  3. [iOS] > [ソース] で、[Header File] を選択します。
  4. [次へ] をクリックします。
  5. ヘッダー ファイル名 BridgingHeader.h を入力します。
    ブリッジング ヘッダー ファイルを作成する
  6. [作成] をクリックします。
  7. ヘッダー ファイルに次の 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 ブリッジング ヘッダーを追加するには:

  1. Xcode でプロジェクトをクリックします。
  2. エディタ領域で [Build Settings] をクリックします。
    [ビルド設定] をクリックします。
  3. [すべて] と [統合] を選択し、[ブリッジング] を検索します。
    検索ブリッジ
  4. [Objective-C Bridging Header] を含む行の右側の列に「BridgingHeader.h」と入力します。
    Objective-C ブリッジング ヘッダーとして BridgingHeader.h を追加する

4. プロジェクトにデフォルト コンテナを追加する

デフォルトのコンテナをプロジェクトに追加する前に、モバイル コンテナ バイナリをダウンロードします。

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. メニューバーの [バージョン] をクリックします。
  4. 選択したコンテナ バージョンで [アクション] > [ダウンロード] をクリックします。
  5. ダウンロードしたファイルの名前はコンテナ ID です(例: GTM-PT3L9Z)。

デフォルトのコンテナ バイナリをプロジェクトに追加するには:

  1. Xcode を開きます。
  2. Dock の Finder アイコンをクリックします。
  3. Downoloads フォルダをクリックします。
  4. コンテナのバイナリ ファイルを Downloads フォルダにドラッグし、Xcode プロジェクトのルートフォルダにドロップします。
  1. Xcode でファイル AppDelegate.swift を開きます。
  2. AppDelegate クラスが TAGContainerOpenerNotifier クラスを拡張します。
    import UIKit
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate, TAGContainerOpenerNotifier {
      // ...
    }
    

    クラスを拡張すると、Type 'AppDelegate' does not conform to protocol 'TAGContainerOpenerNotifier' エラーが発生します。次のステップでこのエラーを修正します。

  3. AppDelegate クラス定義の一番下に次の関数を追加します。
    func containerAvailable(container: TAGContainer!) {
      container.refresh()
    }
    
  4. 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. 画面開くイベントをトラッキングする

画面の開くイベントをトラッキングするには:

  1. トラッキング ID を格納する変数を作成します。
  2. screenName というデータレイヤー変数を作成します。
  3. [Screen View] というタイトルの GTM タグを作成します。
  4. 画面トラッキング コードを追加します。

a. トラッキング ID を格納する変数を作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [変数] をクリックします。
  4. [ユーザー定義の変数] で [新規] をクリックします。
  5. [無題の変数] をクリックして、変数名として「トラッキング ID」を入力します。
  6. 変数タイプとして [定数] を選択します。
  7. 変数の値としてトラッキング ID(UA-XXXXXXXX-X の形式、X は数字)を入力します。
    UA-47605289-5(削除)を使用します。
  8. [変数を作成] をクリックします。

b. screenName という名前のデータレイヤー変数を作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [変数] をクリックします。
  4. [ユーザー定義の変数] で [新規] をクリックします。
  5. [Untitled Variable] をクリックして、タイトル「Screen Name」を入力します。
  6. [データレイヤーの変数] を変数タイプとして選択します。
  7. [データレイヤーの変数名] に「screenName」と入力します。
  8. [デフォルト値を設定する] をクリックします。
  9. デフォルト値「unknown screen」を入力します。
  10. [変数を作成] をクリックします。

c. 「Screen View」というタイトルの GTM タグを作成します。

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [タグ] をクリックします。
  4. [新規] をクリックします。
  5. [Untitled Tag] をクリックして、タグ名「Screen View」を入力します。
  6. サービスとして [Google アナリティクス] を選択します。
  7. リストから [トラッキング ID] を選択します。
  8. [トラッキング タイプ] として [アプリビュー] を選択します。
  9. [詳細設定] をクリックします。
  10. [設定フィールド] をクリックします。
  11. [+ フィールドを追加] をクリックします。
  12. フィールド名 screenName とその値 Screen Name を選択します。
  13. [続行] をクリックします。
  14. [Fire On] で [Any Event] を選択します。
  15. [タグを作成] をクリックします。

d. 画面トラッキング コードを追加する

  1. Xcode でファイル ViewController.swift を開きます。
  2. ViewController クラス内に dataLayer という変数を定義します。
    var dataLayer: TAGDataLayer = TAGManager.instance().dataLayer
    
  3. 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. ボタンが押されたイベントをトラッキングする

ボタンが押されたイベントをトラッキングするには:

  1. eventAction という名前のデータレイヤー変数を作成します。
  2. Event という名前のカスタム イベント変数を作成します。
  3. [Button Pressed] というタイトルの GTM タグを作成します。
  4. ボタンを作成し、ボタンが押されたことを追跡するコードを追加します。

a. eventAction という名前のデータレイヤー変数を作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [変数] をクリックします。
  4. [ユーザー定義の変数] で [新規] をクリックします。
  5. [無題の変数] をクリックして、タイトル「イベント アクション」を入力します。
  6. [データレイヤーの変数] を変数タイプとして選択します。
  7. [データレイヤーの変数名] に「eventAction」と入力します。
  8. [デフォルト値を設定] をクリックします。
  9. デフォルト値に「不明なイベント」と入力します。
  10. [変数を作成] をクリックします。

b. Event という名前のカスタム イベント変数を作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [変数] をクリックします。
  4. [ユーザー定義の変数] で [新規] をクリックします。
  5. [無題の変数] をクリックして、変数名を「Event」と入力します。
  6. 変数タイプとして [カスタム イベント] を選択します。
  7. [変数を作成] をクリックします。

c. [Button Pressed] というタイトルの GTM タグを作成します。

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [タグ] をクリックします。
  4. [新規] をクリックします。
  5. [Untitled Tag] をクリックして、タグ名 Button Pressed を入力します。
  6. サービスとして [Google アナリティクス] を選択します。
  7. リストから [トラッキング ID] を選択します。
  8. [トラッキング タイプ] として [イベント] を選択します。
  9. [イベント] カテゴリを選択します。
  10. [イベント アクション] を選択します。
  11. [続行] をクリックします。
  12. [Fire On] で [Any Event] を選択します。
  13. [タグを作成] をクリックします。

d. ボタンを作成し、ボタンが押されたことを追跡するコードを追加する

  1. Xcode プロジェクトを開きます。
  2. Main.storyboard を開きます。
  3. Xcode ツールバーの右端のボタンをクリックして、ユーティリティ エリア(右側のサイドバー)を開きます。ストーリーボードとユーティリティ領域
  4. ユーティリティ領域の下部で、
    オブジェクト ライブラリを開く青いボタン

    [オブジェクト ライブラリを表示] ボタン(青いボタン)をクリックします。

    オブジェクト ライブラリのポップアップ ウィンドウ
  5. 検索ボックスに「button」と入力します。
    オブジェクト ライブラリのボタン
  6. [ボタン] をストーリーボードにドラッグし、左上にドロップします。
    ボタンをストーリーボードにドラッグ&ドロップします。
  7. Xcode ツールバーのアシスタント エディタ ボタン アシスタント エディタ ボタン をクリックします。
  8. Ctrl キーを押しながらボタンをドラッグし、ViewController クラス定義の一番下にドロップします。
    ボタンを ViewController クラス定義にドラッグ&ドロップします。
  9. ダイアログで [アクション] 接続を選択し、関数名 buttonPressed を入力して、[接続] をクリックします。
    ボタンが押されたイベントを処理するコードを作成する

    これにより、ViewController クラス定義の末尾に次の関数が追加されます。

    @IBAction func buttonPressed(sender: AnyObject) {
    }
    

    この関数は、ボタンが押されるたびに実行されます。

  10. buttonPressed 関数に次のコードを追加して、ButtonPressed イベントをデイレイヤにプッシュします。
    @IBAction func buttonPressed(sender: AnyObject) {
      dataLayer.push(["event": "ButtonPressed", "eventAction": "Test Event"])
    }
    

8. アプリをビルドして実行する

Xcode で、[Product] > [Run] をクリックします。Xcode はアプリをビルドして実行します。

起動したアプリのスクリーンショット