フォローする

Googleタグマネージャを使ったタグ設置方法

概要

Googleタグマネージャ(以下、GTM)を使ったKaizen PlatformのJavaScriptコードを設置する方法を説明します。

本項は2016年11月現在のGTM、Kaizen Platformの仕様やUIに基づいて説明しています。
各ツールのアップデートによっては、最新の仕様やUIとは異なる可能性があります。

なお、タグマネージャー経由で配信した場合、ブラウザーの拡張機能やアプリで広告ブロック(コンテンツブロック)をしていると、JSが実行され無いことがあります。

 

GTM側での設定

1. Googleタグマネージャにログインし、 ワークスペース > タグ から新規 をクリックしてください。

 

2. タグの設定 > タグタイプを選択 から カスタム HTML を選択して下さい。

 

3. HTMLの入力エリアが表示されるので、Kaizen PlatformからJavaScript コード をコピーし、貼り付けてください。

ペースト後、下の document.write をサポートする に必ずチェックを入れて下さい。
これが外れていると、JS疎通やデザイン案の反映が正しく行われない事があります。

 

4. 詳細設定 を開き、タグ配信の優先度 に他で設定している数字より大きい値を設定して下さい。

 

5. 下部にある トリガー ボタンをクリックして、 トリガーの選択 から配信したいページのURLを含んだトリガーを設定してください。

補足
新たにトリガーを作成する場合には、以下の手順を参考にしてください。

トリガーの選択 画面で、右上の + ボタンをクリックし、トリガーの設定 > トリガーのタイプを選択 から ページビュー を選択してください。

一部のページビュー を選択して、Kaizen JSを配信したいURLを設定してください。その後、右上の 保存 ボタンをクリックします。

 任意のトリガー名を付けて、保存します。

 

6. トリガーの設定後、タグ設定画面で右上の保存をクリックし、任意のタグ名を付けて、保存します。

 

7. GTMで追加したタグを プレビュー または 公開 で確認してください。

 

ページで反映確認

1. 元ページをブラウザで開き、 開発者モードからページ内の要素を確認して下さい。

  • Google Chromeの場合: 右クリック > 検証 > Elements
  • IE11の場合: 右クリック > 要素の検査 > DOM Explorer
  • Firefoxの場合: 右クリック > 要素を調査 > インスペクタ

2. 要素の中で cdn.kaizen と検索し、ヒットしたスクリプトのコードが、以下のキャプチャのように data-kz-keydata-kz-namespace の属性が表示されていれば問題ありません。

<script data-kz-key="XXXXXXXXXXXXXX" data-kz-namespace="kzs" src="//cdn.kaizenplatform.net/s/XX/XXXXXXXXXXXX.js"></script>

 

※注意
以下の様に設置されている場合 document.write をサポートする にチェックが入っていない可能性があります。
GTMのタグ配信設定を見直して下さい。

<script type="text/javascript" id="" src="//cdn.kaizenplatform.net/s/XX/XXXXXXXXXXXXXX.js"></script>

document.write をサポートするにチェックが入っていない状態では、テスト中に以下のような事が起こります。

  • デザイン案が適用されない
  • プレビューが反映されない
  • デザイン案適用時にチラつきが大きくなる
  • 訪問計測、ゴール計測がされない
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。