【GTM超応用】Googleアナリティクスで１ページの「複数商品」「複数項目」を計測する手順（タグマネージャ使用）

今回は少しテクニカルな計測です。Googleアナリティクスの拡張eコマーストラッキングを使うと、１ページに複数の商品が並ぶ場合、1商品1商品わけて、表示回数を計測できます。

有効な場面

どんな場面で有効かというと例えば、

[ul]レコメンドエリアのレコメンド商品表示を計測する
チェックボックスのチェック項目を計測する[/ul]

これは、通常、商品ごと、チェック項目ごとに分けて計測することができません。

仮に、１ページで商品として「りんご」「パイナップル」「ぶどう」がおすすめ表示された場合は、分けて計測することができません。「りんご:パイナップル:ぶどう」などと、つなげた文字列で計測することが限界です。

今回、「拡張eコマーストラッキング」の「内部プロモーション」を使って、商品やチェック項目を個別に分けて、計測する方法をご紹介します。

[aside type="normal"]以下、略語使用します。
GA＝Googleアナリティクス
GTM＝Googleタグマネージャ[/aside]

最終的な計測イメージ

例えば、ページ上の好きな果物を選択してくださいで「りんご」「パイナップル」「ぶどう」にチェックを付けて、次へボタンを押した場合に、以下のURLになる場合

例）http://localhost/?q=りんご&q=パイナップル&q=ぶどう

次の画面のように計測できます。

Googleアナリティクスは、意外とこれが難しいのです。今回、内部プロモーションを使って、個別のワードとして計測を実現しています。

それでは、さっそく設定していきます。

操作手順

GAビューの拡張eコマース設定

GAの必要な設定をします。

画面左下の「管理（歯車アイコン）」をクリックして、管理画面を開きます。
計測する「ビューの設定」を開きます。

「eコマースの設定」をクリックします。
「eコマースを有効にします」を「有効」にします。
「拡張eコマースのレポートを有効化」を「オン」にします。
「送信」ボタンをクリックして、保存します。

続いて、GTMを設定します。
まずは１つめの変数です。

カスタムjavascript変数の作成

ユーザー定義変数を作成します。種類は「カスタムjavascript」です。
これにより、URLから複数のキーワード情報を受け取って、１つ１つ取得する変数を作成します。

設定する変数は次の通りです。
検索ワードのパラメータが「q」の場合の例です。「q」ではない場合は、その部分を変更します。

function() {
    
    // 配列を定義します
    var arg = new Array;

    // 変数pairにURLの?の後ろを&で区切ったものを配列にして代入
    var pair = location.search.substring(1).replace("?","&").split('&');

    // for文でpairがある限りループさせる
    for (var i = 0; pair[i]; i++) {

        // 変数wordsにpairを=で区切り配列に分割する
        var words = pair[i].split('='); // wordsはkey-value

        // qパラメーターに格納された項目のみ、最初に定義したオブジェクトargに名前付き配列として格納します
        if (words[0] == "q") {
            arg.push({
                'name':decodeURIComponent(words[1]),
                'id': decodeURIComponent(words[1]),
                'position': '検索ワード'
            }); 
        }
    }

  	// 拡張eコマース用オブジェクトとして渡す
    var ecommerceData = {
        'ecommerce': {
            'promoView': {
                'promotions': arg
            }
        }
    };
    return ecommerceData;

}

続いて、２つめの変数です。