Swift スタートガイド

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

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

  1. Xcode を開きます。新しいプロジェクトを作成します
  2. [新しい Xcode プロジェクトを作成] をクリックします。
  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. [File] > [New] > [File] をクリックします。
  3. [iOS] > [Source] で、[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] をクリックします。
    [Build Settings] をクリックします
  3. [All] と [Joind] を選択して、「bridging」を検索します。
    検索ブリッジ
  4. Objective-C ブリッジング ヘッダーを含む行の右側の列に「BridgingHeader.h」と入力します。
    BridgingHeader.h を Objective-C ブリッジング ヘッダーとして追加します。

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. スクリーン ビュー」という名前の 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. [無題の変数] をクリックして、「スクリーン名」というタイトルを入力します。
  6. [データレイヤーの変数] を変数タイプとして選択します。
  7. [データレイヤーの変数名] に「screenName」と入力します。
  8. [デフォルト値を設定] をクリックします。
  9. デフォルト値の「unknown screen」を入力します。
  10. [変数を作成] をクリックします。

c. 「スクリーン ビュー」というタイトルの GTM タグを作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [タグ] をクリックします。
  4. [New] をクリックします。
  5. [Untitled Tag] をクリックして、タグ名「Screen View」を入力します。
  6. サービスとして [Google アナリティクス] を選択します。
  7. リストから [トラッキング ID] を選択します。
  8. [トラッキング タイプ] として [アプリビュー] を選択します。
  9. [詳細設定] をクリックします。
  10. [設定フィールド] をクリックします。
  11. [+ フィールドを追加] をクリックします。
  12. フィールド名 [screenName] と値 [Screen Name] を選択します。
  13. [Continue](続行)をクリックします。
  14. [配信するイベント] で [任意のイベント] を選択します。
  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. 「ボタンを押す」というタイトルの 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. 「ボタン押下」というタイトルの GTM タグを作成する

  1. Google タグ マネージャー アカウントにログインします。
  2. モバイル向けのコンテナを選択します。
  3. 左側のナビゲーション バーで [タグ] をクリックします。
  4. [New] をクリックします。
  5. [無題のタグ] をクリックして、タグ名として「Button Pressed」と入力します。
  6. サービスとして [Google アナリティクス] を選択します。
  7. リストから [トラッキング ID] を選択します。
  8. [トラッキング タイプ] として [イベント] を選択します。
  9. [イベント] カテゴリを選択します。
  10. [イベント アクション] を選択します。
  11. [Continue](続行)をクリックします。
  12. [配信するイベント] で [任意のイベント] を選択します。
  13. [タグを作成] をクリックします。

d. ボタンを作成し、ボタンが押されたことをトラッキングするためのコードを追加する

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

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

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

    これにより、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 がアプリをビルドして実行します。

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