2023-02-27 / Staff Blog / Google Analytics

warning この記事の内容は古くなっています。

現在とは内容が異なる場合がありますので十分ご注意ください。
2023年7月以降、ユニバーサル アナリティクス プロパティで新しいデータは収集されなくなります。

こんにちは。
マーケティング部の木村です。

さて今回はQuestetra BPM Suite の公開フォーム（iFrame）のコンバージョン計測方法について、ご紹介します。

背景：なぜこの記事を書くに至ったのか

もの凄くシンプルに言うと「iFrameでのコンバージョン計測について、情報が少ない」と感じたからです。Googleで検索してみても「これだ！」という情報はありませんでした。（あるのかも知れませんが、探せませんでした）

Questetra BPM Suite では、「メッセージ開始イベント（フォーム）」というパーツがありますが、これがかなり「使える」パーツでして「Webサイト上での入力フォーム（申込みとか、アンケートとかetc）」を簡単に作成し、iFrameで外部Webサイト上に埋め込み表示することができます。

しかし、Google Analytics を使用してフォーム（iFrameの）のコンバージョン計測を行うにはちょっとしたコツが必要で、ハマるポイント（上手く行かないポイント）もあります。

クエステトラ社内でも「メッセージ開始イベント（フォーム）」を使用して各種申込みなどの公開フォームを提供していますが、コンバージョンの計測に結構難儀しましたので、今回はその実体験をベースに計測方法を紹介します。

この記事のゴール

親サイトの中でiFrameで表示された入力フォームのコンバージョン計測を、GoogleAnalyticsで計測できるようにする。
※iFrameで表示される入力フォームはQuestetra BPM Suite の「メッセージ公開イベント（フォーム）」を使用する

この記事の対象者と前提条件

使用するツール

Questetra BPM Suite

Questetra BPM Suite。今回は入力フォームの作成に使用します。
https://questetra.com/ja/

Google タグマネージャー

Google タグマネージャー 。Google Analyticsの計測タグの作成や管理を行います。
今回はコンバージョン計測用の「タグ」「トリガー」「変数」を作成し公開します。
https://tagmanager.google.com/?hl=JA

Google Analytics

Google Analytics。Webサイトの訪問分析ツール。
今回は「目標」を設定しコンバージョンを計測します。
https://analytics.google.com/analytics/web/?hl=ja#/

ここまでが序文です。次章から具体的な作成と設定に入ります。

作成および設定

公開フォーム（今回はフォーム自体の作成はありません）

今回はフォームは既に作成済みとして進めます。
※　フォーム作成の参考記事：M220: 公開フォーム画面に入力があった時に自動的に開始されるように設定する

フォームの「送信ボタン」クリックをiFrame を埋め込む親ページのレイヤーに対して通知する仕組み（javascript）を追加します。

既存フォームへのjavascript追加方法

作成済みアプリ（公開フォーム）の編集画面を開きます。
データ項目に「ガイドパネル」を追加します。

追加したガイドパネルの「歯車」アイコンをクリックし、設定画面を表示します。
以下のjavascriptを入力し、「適用して閉じる」をクリックします。

Script (click to open)
<script type="text/javascript">
function jumpToAction(){
	 window.parent.postMessage(location.pathname,'*');
 	 return true;
}

jQuery(document).ready(function(){
	jQuery('input[type="submit"][id="submitButton"]').attr('onclick',"return jumpToAction();");
});

</script>

javascriptを追加したら、ガイドパネルは「非表示」に設定しておきましょう。
これでフォーム側の設定は終了です。

Googleタグマネージャー上の変数の作成

Googleタグマネージャーで「変数」を2つ作成します。

1つ目は親のサイトに対して、子サイトだよと伝えるための、データレイヤー向け変数。
2つ目はGoogle AnalyticsのトラッキングIDを格納しておくための変数です。

１つ目の変数の作成

  1. 左ナビ内の変数をクリック
  2. 「ユーザー定義変数」で「新規をクリック」

以下の内容で作成します。

  1. 変数の名前：「child_path」と入力　※ここはわかりやすければ何でも良いです。
  2. 変数のタイプ：「データレイヤーの変数」を選択
  3. データレイヤーの変数名：「child_path」と入力　※ここは入力フォームでのクリックイベントを「トリガー」で受け取る際に、参照される変数名です。今回は必ずこの様に入力してください。

右上の「保存」ボタンをクリックして保存します。

2つ目の変数の作成

次にGoogle AnalyticsのトラッキングIDを格納する変数を作成します。

  1. 変数の名前を入力（今回はGoogle Analytics IDとしています）
  2. 変数のタイプ：「Google アナリティクス設定」を選択
  3. トラッキングID：「自社のトラッキングID」を入力
  4. cookieドメイン：「auto」を選択

右上の「保存」ボタンをクリックして保存します。
変数の作成は以上です。

Googleタグマネージャー上のトリガーの作成

Googleタグマネージャーで「トリガー」を３つ作成します。
用途は以下の通りです

1.カスタムイベントの判定
2.DOMの除外ページの判定
3.全ページでDOMの待受をする

1つ目のトリガーの作成

  1. 左ナビ内の「トリガー」をクリック
  2. 「新規をクリック」
  1. 名前に「子フレームトリガー」と入力
  2. トリガーのタイプは「カスタムイベント」を選択
  3. イベント名に「child-frame-event」と入力
  4. このトリガーの発生場所で「すべてのカスタムイベント」を選択
  5. 右上の「保存」ボタンをクリックして保存。

    １つ目のトリガー作成は以上です。

2つ目のトリガー作成（DOMの除外ページの判定）

ユーザーがWebサイトに訪問してきた際、閲覧しているページ名（親ページの）が「conversion-test」というページであるかどうか、DOM内で待ち受けするトリガーです。
もしそうであった場合（このトリガーで設定したPage URLが閲覧されている場合）は、子ページ内でクリックがあった際に、親ページのPVを不能にする（子ページのPVを取得するため）ためのトリガーです。

  1. 名前に「ページパス」と入力
  2. トリガーのタイプは「ページビュー – DOM Ready」を選択
  3. このトリガーの発生場所で「Page URL」を選択。条件を「含む」に選択。右側の入力欄に「計測対象の親ページのURLのパスの一部」を入力する。
    ※ https://example.com/conversion-test/ というURLに入力フォームがあるとする。左記のページを計測対象としたいので、この場合は「conversion-test」と入力する
  4. 右上の「保存」ボタンをクリックして保存。

    2つ目のトリガー作成は以上です。

3つ目のトリガー作成（全ページでのDOMの待受け）

  1. 名前に「All Pages」と入力
  2. トリガーのタイプは「ページビュー – DOM Ready」を選択
  3. このトリガーの発生場所で「すべての DOM Ready イベント」を選択
  4. 右上の「保存」ボタンをクリックして保存。
    3つ目のトリガー作成は以上です。

トリガーの作成は以上です。

Googleタグマネージャー上のタグの作成

Googleタグマネージャーで「タグ」を4つ作成します。
用途は以下の通りです

  1. 親ページのPVカウントタグ
  2. カスタムHTMLのスクリプト処理タグ
  3. 子iFrameで動作するPVタグ
  4. 子iFrameで動作するイベント発火タグ

1つ目のタグの作成

  1. 左ナビ内のタグをクリック
  2. 「新規をクリック」
  1. 名前に「GA ページビュー」と入力
  2. タグの種類で「Google アナリティクス：ユニバーサルアナリティクス」を選択
  3. トラッキングタイプで「ページビュー」を選択
  4. Google アナリティクス設定で、今回作成した変数を選択（今回は Google Analytics ID という名称で変数として作成しているので、それを選択する）
  5. トリガーの欄で、今回作成した2つのトリガーを追加する（All Pages と ページパス）
  6. 右上の「保存」ボタンをクリックして保存。

    １つ目のタグ作成は以上です。

2つ目のタグ作成

このタグが今回のポイントです。
特定のURLで発生するイベントがトリガーを判定して、Google Analyticsのデータレイヤーにpushするタグとなります。
javascriptの7行目に設定するURLを間違えると「どのサイトで発生したイベントであるのか？」を、Safariブラウザで検知できなくなります。

  1. 名前に「カスタムHTML受信用」と入力
  2. タグの種類で「カスタムHTML」を選択
  3. トラッキングタイプで「ページビュー」を選択
  4. HTMLの欄にjavascriptを記載
  5. 配信トリガーで「ページパス」を選択
  6. 右上の「保存」ボタンをクリックして保存。

上記の手順4で記載するjavascriptは以下となります。
7行目のURLには、Questetra BPM Suite のシステム基盤のドメインURLを記載して下さい（ユーザー毎に異なるので、必ず確認の上入力）

Script (click to open)
<script>
jQuery(function()
{
// メッセージを受信したとき
jQuery(window).on('message', function(event)
{
  if (event.originalEvent.origin === "https://◯◯.questetra.net") {
    // 受信したメッセージ自体を表示
     dataLayer.push({"event": "child-frame-event", "child-path":event.originalEvent.data});
  }
});
});
</script>

2つ目のタグの作成は以上です。

3つ目のタグの作成

  1. 名前に「子フレーム用PV」と入力
  2. タグの種類で「Google アナリティクス：ユニバーサルアナリティクス」を選択
  3. トラッキングタイプで「ページビュー」を選択
  4. Google アナリティクス設定で、今回作成した変数を選択（今回は Google Analytics ID という名称で変数として作成しているので、それを選択する）
  5. 配信トリガーで「子フレームトリガー」を選択
  6. 右上の「保存」ボタンをクリックして保存。

    3つ目のタグ作成は以上です。

4つ目のタグ作成

  1. 名前に「子フレーム用　イベントトラッキング」と入力
  2. タグの種類で「Google アナリティクス：ユニバーサルアナリティクス」を選択
  3. トラッキングタイプで「ページビュー」を選択
  4. カテゴリに「test」と入力
  5. アクションに「conversion」と入力
  6. ラベルに「conversion」と入力
  7. 値に「1」を入力
  8. Google アナリティクス設定で、今回作成した変数を選択（今回は Google Analytics ID という名称で変数として作成しているので、それを選択する）
  9. このタグでオーバーライド設定を有効にするにチェックを入れる（有効にする）
  10. 配信トリガーに「子フレームトリガー」を選択する
  11. 右上の「保存」ボタンをクリックして保存。

    4つ目のタグ作成は以上です。

一旦ここでGoogleタグマネージャーの設定は終わりです。

Google Analytics 上での目標設定

  1. Google Analyticsの「管理」項目内にある「目標」をクリックします
  • 「新しい目標」（赤いボタン）をクリックし、目標設定で「カスタム」を選択。続行ボタン（青いボタン）をクリックします
  • 目標の説明欄で「名前（ここは何でも良い。申込みとかでOK）」を入力
  • タイプで「イベント」を選択
  • 続行ボタンをクリックします
  • 目標の詳細欄で以下の内容で選択・入力します
    カテゴリ：「等しい」　test
    アクション：「等しい」 conversion
    ラベル：「等しい」 conversion
    値：「完全一致」 1
  • コンバージョンの目標値としてイベント値を使用に「1」と入力
  • 保存ボタンをクリックします
  • 保存した目標の一覧が表示されるので、記録を「オン」にする

    これでGoogle Analyticsの設定は完了です

Google タグマネージャーでの設定公開

  • Google タグマネージャー上で「公開」ボタンをクリックします。

検証

正常にタグが動作すると、公開フォーム経由でもうしこみがあった際に、Google Analytics上の以下の項目で確認できるようになります。

・項目「リアルタイム」 → コンバージョン
・項目「コンバージョン」

あとがき

非常に長くなりましたが、上記でiFrame で表示されたフォームのコンバージョンの計測が可能となります。
内容としては、かなり端折っていますので、もし既存のお客様で質問がある方はサポートにお問い合わせ下さい。

Google タグマネージャーを上手に活用すると、Webサイト上のイベントをほぼ計測できるようになりますので、ぜひ一度試してみてください。

それではまた！

About The Author

Draw Process, Enjoy Routine - for your Order Fulfillment, Cloud Control, and Approval Flows.

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

上部へスクロール
%d人のブロガーが「いいね」をつけました。