本ドキュメントはGoogle Tag Managerのアカウントやコンテナが準備されていることが前提となります。 作成がまだの方は、タグ マネージャーの設定とインストールをご参照ください。
概要
Google Tag Manager（以下GTM）を利用したOnboardingの設定方法についてのドキュメントです。
GTMをご利用いただくことで、JavaScriptタグの設置やパラメーター管理といったサイト改修の手間を削減し、運用負荷の軽減が可能です。
対象者
Onboarding利用開始にあたりGTMでのJavaScriptタグ管理をお考えのお客様向けの記事となります。
目次
コンテナにJavaScriptタグを追加
GTMタグや発火のトリガー設定を行います。
Onboardingを導入するサイトに紐付いたコンテナの編集画面に入り、以下の手順を実施してください。
- メニューから「タグ」をクリック
- 「新規」をクリックし、タグを新規作成
- 「タグの設定」をクリック
- 「カスタムHTML」を選択
- Onboarding JavaScriptタグを貼り付け
- 「トリガー」をクリック
- 右上の「＋」からトリガーを新規作成
- Dom Ready（ページ読み込み時に発火）を選択
- ここまでの設定が完了後、以下と同様の設定になっているかご確認ください。
- 「保存」をクリック
dataLayerでパラメータを送信
dataLayerに必要な変数をプッシュします。（サイト側の改修が必要）
設定したトリガーによりタグが発火される前に、変数に値がプッシュされている必要があります。
以下のサンプルは、Onboardingインテグレーションガイドのパラメーター欄でデフォルトで定義しているキーに合わせて作成しています。また、ここではサンプルとしてvalueに固定値を渡しています。
var dataLayer = dataLayer || [];
dataLayer.push({
user_id: "abc1234",
user_name: "オンボ太郎",
user_group_id: 263276,
user_group_name: "株式会社STANDS"
});dataLayerに変数を作成
Onboardingタグ内の記述にdataLayerでパラメータを送信で設定していただいた値を渡すため、GTMの変数として定義します。
- メニューから「変数」をクリック
- 「新規」をクリックし、変数を新規作成
- 「変数を設定」をクリック
- 「データレイヤーの変数」を選択
- 「データレイヤー変数名」にプッシュ時のキー名を入力
- ここまでの設定が完了後、以下と同様の設定になっているかご確認ください。
- 保存をクリック
JavaScriptタグに変数をセット
- ここまでの設定が完了すると、JavaScriptタグからdataLayerに送信した変数を、中カッコ二重囲い
{{ user_id }}で参照可能となります。
動作確認
ここまでのGTM設定により、Onboardingが正常に読み込まれているかの疎通確認については、ヘルプページの疎通確認についてを参照ください。
