タグマネージャを利用したい

GoogleアナリティクスやGoogleAdwordsなどのアクセス解析用のトラッキングコードをクライゼルのフォームに設定する際、“タグマネージャ”を利用すると便利です。

タグマネージャには、GoogleタグマネージャやYahoo!タグマネージャ等がありますが、クライゼルではGoogleタグマネージャを利用するケースをモデルとして便利な機能をご用意しています。

下記にGoogleタグマネージャを利用してGoogleアナリティクスを設定する場合の使用方法についてご説明します。

このページの概要

タグマネージャとは？	Googleタグマネージャの概要とできることをご紹介します。
クライゼルにタグマネージャのタグを設定する	クライゼルフォームにタグマネージャを設定する方法や、ページごとの計測値をご説明します。
GoogleタグマネージャでクライゼルにGoogleアナリティクス4を設定する	フォームのGoogleアナリティクス4に送信するためのタグマネージャ設定手順をご紹介します。
GA4での計測のテスト	Googleアナリティクス4での計測テスト時の準備から、管理画面での確認方法までをご説明します。
Google広告のコンバージョンタグの設置方法	Google広告（旧アドワーズ）のコンバージョンタグを設置する方法についてご紹介します。

参考

あらかじめタグマネージャのアカウントを作成する必要があります。

タグマネージャとは？

タグマネージャとは、複数のWebページに入れるタグを一元管理できるサービスです。

ページごとに実行したいタグのルールはタグマネージャ管理画面で設定できますので、各画面のソースコードを編集する手間がなく便利です。

例えば、Googleタグマネージャでは下記のようなことができます。

Googleアナリテイクスのページビュー計測タグをクライゼルフォームの各画面で実行したい
Googleアナリテイクスのページビュー計測タグを自社サイトで実行したい
GoogleAdwordsのコンバージョン計測タグをクライゼルフォームの完了画面で実行したい
Yahoo!プロモーション広告のコンバージョンタグをクライゼルフォームの完了画面で実行したい
とある外部サービスの実行用Javascriptをクライゼルフォームの全ページに設置したい

クライゼルにタグマネージャのタグを設定する

クライゼルでタグマネージャを設定する手順は以下のとおりです。

下記の設定を行うと、そのフォームグループに存在するページ全てに適用されます。

設定手順

1　タグマネージャのインストール用のタグを確認します。

Googleタグマネージャの設置タグ入り口画面

Googleタグマネージャの設置タグ取得画面

上記画面の枠内のコードをそのままコピーします。

2　［フォーム］＞[フォーム一覧]を開き、設定したいフォームグループの[更新]を開きます。

フォームグループの[更新]ボタン画面

3　［タグマネージャー設置タグ］欄に、1のコードを貼り付けます。

タグマネージャー設置タグ入力欄

ここに入力することで自動生成でも、デザインタイプでも、各ページのソース内にある</head>の直前にタグが設置されます。

参考

Googleタグマネージャでは<head>タグの直下に設置するように明記されていますが、クライゼルでは都合により</head>の直前に設置されます。Googleアナリティクス等のタグの動作については問題ありません。
bodyタグ内に設置するコードについては、Javascriptが有効ではない場合に動作するタイプのタグ設定だけが関係します。（例：Google広告コンバージョンタグのnojavascriptタグ部分）対応する必要がある場合には［デザイン］のメニューにて設置してください。（自動生成タイプの場合は、［テキスト］要素を追加して「HTMLタグ有効」にて設置。／デザインタイプの場合は各画面のソースのbody内に設置。）

4　クライゼルフォームは入力、確認画面が同一URLで遷移しますが、各ページのソースにページ情報を挿入させることで、タグマネージャで入力画面、確認画面、完了画面を区別して指定やデータ取得が行えるようになります。

その為、［ページ情報タグ］の［挿入する］にチェックを入れます。

※この機能が追加される前に作成されたフォームではチェックが入っていませんが、バージョンアップ後に新規作成したフォームグループには全てチェックが入っています。

各ページごとのページ名一覧

登録	更新	削除	パ変	パ再	ページ名	GA計測値	備考
●					規約画面	agreement
	●	●	●		認証画面	auth
●	●			●	入力画面	input
●	●	●		●	確認画面	preview
●					仮登録完了画面	doin_prefinish	ダブルオプトイン有効時のみ
●	●	●	●	●	完了画面	finish
●					仮登録完了済み画面	doin_retried	ダブルオプトイン有効時のみ
●	●	●	●	●	完了済み画面	retried
●					仮登録URL有効期限切れ画面	doin_timeouted	ダブルオプトイン有効時のみ
●					本登録重複画面	doin_exists	ダブルオプトイン有効時のみ
●	●	●	●	●	公開期間前画面	before	共通フォームデザイン
●	●	●	●	●	公開期間後画面	after	共通フォームデザイン
●					登録数オーバー画面	over	共通フォームデザイン
●	●	●	●	●	対応外キャリア画面	deny	共通フォームデザイン
●	●	●	●	●	タイムアウト画面	timeout	共通フォームデザイン
●	●	●	●	●	非公開示画面	noready	共通フォームデザイン

参考

フォームグループをコピーした際にも上記設定は有効です。
上記設定を行っただけではGoogleアナリティクスやGoogleAdwordsのタグの設置が完了したわけではありません。あわせて下記にご紹介するタグマネージャ側の設定が必要となります。

GoogleタグマネージャでクライゼルにGoogleアナリティクス4を設定する

クライゼルのフォームのページビューをGoogleアナリティクス4（GA4）に送信する設定をタグマネージャ管理画面で設定します。

ここではGoogleタグマネージャを例にとり、設定方法をご説明します。（2021年4月2日時点での仕様を元にしています。）

設定のポイントとしては、GA4で取得できるpage_viewイベントのpage_path（ページのパス）の値とpage_title（ページタイトル）の値に、入力、確認、完了が区別できる値を付けるという点です。

タグマネージャ設定手順

1　クライゼルのページ情報を取得するための設定を行います。

Googleタグマネージャログインして該当のコンテナ名をクリックし、［変数］＞「ユーザ定義変数」欄の右上にある［新規］を選択します。

タグマネージャ変数画面

2　変数の新規作成画面にて、下記のように設定します。

［名前のない変数］を［クライゼルページ情報］等に上書き
［変数タイプを選択］にて［DOM要素］を選択
［選択方法］に［ID］を選択
［要素ID］に［gtmkr］と入力
［属性名］に［value］と入力

タグマネージャ変数の設定画面

［保存］をクリックします。

続いて、ページのタイトル<title>タグの値を取得するための再度、ユーザ定義変数の［新規］をクリックします。

［名前のない変数］を［ページタイトル］等に上書き
［変数タイプを選択］にて［DOM要素］を選択
［選択方法］に［CSSセレクタ］を選択
［要素ID］に［title］と入力
［属性名］は空欄

タイトル用の変数の設定画面

［保存］をクリックします。

これでクライゼルの入力画面、確認画面、完了画面などを区別するための情報を取得する準備が完了しました。

3　クライゼルのフォームグループ内の全てのページでGoogleアナリティクスを実行する為の「トリガー」を作成します。

［トリガー］＞［新規］を選択します。
トリガーの新規作成画面が表示されますので、下記のように設定してください。

［無題のトリガー］を「クライゼルで実行」等と上書き
［トリガーの設定］エリアをクリックし［トリガーのタイプを選択］にて［DOM Ready］を選択
［このトリガーの発生場所］にて［一部の DOM Ready イベント］を選択
［イベント発生時にこれらすべての条件が true の場合にこのトリガーを配信します］に［Page URL］を選択して［含む］を選択し、［krs.bz/環境ID］等入力
※環境IDは実際の環境IDそのものを入力。
※フォームバーチャルドメインを利用している場合は"krs.bz"を含めずにフォームのドメイン部のみを指定。

タグマネージャのトリガー設定画面

画面右上の［保存］をクリックして、作成完了です。
これでクライゼル上でタグを実行できる条件が作成できました。

4　いよいよGoogleアナリティクス4のページビュー計測用のタグを設定します。

［タグ］＞［新規］を選択し、タグの新規作成画面が表示します。
［名前のないタグ］を「クライゼル用GA4ページビュー」等で上書きします。
［タグの設定］をクリックします。

［タグタイプを選択］で［Googleタグ］を選択します。

- ［測定 ID］に、利用したいGA4プロパティに作成されているウェブストリームの測定IDを入力します。のトラッキングIDを入力します。
  ※GA4の測定IDは、Googleアナリティクス管理画面の［管理画面］＞対象プロパティの［データストリーム］内で作成できます。
- ［設定フィールド］の［行を追加］をクリックし、［フィールド名］に「page_path」と指定します。［値］には、ブロックマークをクリックし、「Page Path」の変数を呼び出し、「{{Page Path}}」の後ろに「/」を入力して、半角小文字で入力し、右側のブロックマークから「クライゼルページ情報」の変数を呼び出します。
  ※これによって、GA4のpage_viewイベントのpage_pathの値を、「入力画面」「確認画面」「完了画面」の区別がつくようにカスタマイズできます。
- ［行を追加］をクリックし、［フィールド名］に「page_title」と半角小文字で入力します。［値］には、ブロックマークをクリックし、「ページタイトル」の変数を呼び出し、「｜」で区切り、「クライゼルページ情報」の変数も指定します。
次に下段の［トリガー］のエリアをクリックします。

［トリガーの選択］で［3］で作成したトリガーに選択します。

画面右上の［保存］を押したらタグの設定は完了です。

5　Googleタグマネージャは、設定が完了しただけでは最終的に実行させることはできません。
必ず公開するための設定が必要です。
画面右上の［公開］を押します。

即座に設定を反映させる場合は［バージョンの公開と作成］が選択された状態で［公開］を押してください。
［バージョンの名］や［バージョンの説明］は必要に応じて説明を残せます。

上記画像の［バージョンの説明］に記載した設定内容の概要を残したい場合には下記からコピーしていただけます。

★変数作成　→クライゼルフォームのURLは入力確認と同一なので、変数を使用しidがgtmkrの要素のvalueの値を取得しURLに含める（入力・確認・完了でvalueの値が変わる。）「ページタイトル」変数では対象ページの

※慎重にテストしてから公開したい場合は、［バージョンの公開と作成］ではなく［バージョンの作成］を選択し、［作成］ボタンをおします。プレビュー機能の使用方法はGoogleタグマネージャのヘルプをご参照ください。Googleタグマネージャヘルプ「コンテナのプレビューとデバッグ」

6　リンク元サイトと同じGoogleアナリティクス4プロパティで計測する場合は、クロスドメイントラッキングを行い、ユーザの行動（セッション）が継続して計測できるようにします。

フォームバーチャルドメインを利用し、クライゼルフォームURLがリンク元ドメインと同一（サブドメイン違い）の場合、この設定は必要ありません。

クロスドメイントラッキングを行うと、リンク元とクライゼルフォームで同一セッションとなるため、フォームの完了画面をコンバージョンと定義した場合に、コンバージョンの［イベントの参照元］の情報がリンク元サイトへの流入元情報を引き継げた形の値にすることができます。

完了画面をコンバージョンとして扱うには、コンバージョン設定が必要です。コンバージョン設定についてはGoogleアナリティクスのヘルプページをご参照ください。

GA4ではクロスドメイントラッキングの設定をGoogleアナリティクスの管理画面で行うようになりました。
Googleアナリティクス管理画面の［設定アシスタント］の［タグの設定］を開きます。

対象のデータストリームの設定を開きます。

［追加の設定］の［タグ付けの詳細設定］を開きます。

［タグ付けの詳細設定］の［ドメインの設定］を開きます。

［ドメインの設定］の［設定］でマッチタイプを「含む」等指定し、ドメイン部にリンク元ドメインと、krs.bzを指定します。

GA4での計測のテスト

上記の設定を行った上で、GA4での計測テストを行う際は、下記のようなポイントをご確認ください。

準備　テストには、「リアルタイム」の機能を使用します。
この時、すでに他の人からのアクセスがあるとテストアクセスだけを検証することが難しい為、テストアクセスであることの目印がつくよう、「内部トラフィック」の定義をすることをおすすめいたします。

「内部トラフィック」の定義方法をご紹介します。

前述の［追加の設定］の画面で、［内部トラフィックの定義］を開きます。

［内部トラフィックの定義］の［設定］でマッチタイプを「含む」等指定し、ドメイン部に自社で使用するグローバルIPアドレスを指定します。

※ただし、組織内で外部アクセスに対してプロキシ等を利用されている場合など、IPアドレスが固定化されていない場合があります。ネットワーク管理ご担当者様にご相談の上、特定の外部アクセスに固定IPを利用する設定を行う等の対処が必要です。（その場合は、「www.google-analytics.com」へのアクセスを対象に設定します。）

1　GA4管理画面で［リアルタイム］を開きます。
リンク元サイトにアクセスします。
複数のアクセスが検出されたら、［すべてのユーザ］をクリックして、［比較の作成］にて「オーディエンス」部分を「テストデータのフィルタ名」に変更し、［Internal Traffic］にチェックを入れて［適用］します。

その際、［ユーザ］欄でAll Usersが1であれば、自身の計測が特定できていることになります。