Yahoo!タグマネージャーでKaizen Platformのタグを配信する

本項では、Yahoo!タグマネージャーを使ったKaizen PlatformのJavaScriptコードを設置する方法を説明します。

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

1. サービスタグの追加

まず、Yahoo!タグマネージャーでKaizen Platformのタグを追加する方法を説明します。

1. Yahoo!タグマネージャーにログインしていただき、サービスタグを追加を押します。
   
2. サービスタグ一覧から「Kaizen」で検索すると、Kaizen Platformのタグが表示されます。「Kaizen K2 Tag」をご選択ください。
   
3. Kaizen K2 Tagの入力フォームが表示されます。サービス名とコメントは、Yahoo!タグマネージャー内でサービスタグを管理するための項目ですので運用しやすい形でご設定ください。Kaizen K2 Tag URL には、Kaizen PlatformのJavaScriptコードのsrcに?kz_namespace=kzs&kz_async=ytmを追加したURLを設定します。
   
4. なお、Kaizen PlatformのJavaScriptコードのsrcは画像の枠線部分を指します。?kz_namespace=kzs&kz_async=ytmを追加すると、//cdn.kaizenplatform.net/s/xx/xxxxxxxxxxxxxx.js?kz_namespace=kzs&kz_async=ytmが設定するURLになります。（前後のダブルクオーテーションは含まないでください。）
   
5. 項目を入力したら、サービスタグの作成でタグの作成が完了します。
   
6. サービスタグの作成を押すと、どのURLでタグを配信するかのインプットの設定画面が表示されます。こちらは後ほど解説いたしますので、割愛いたします。
   
7. サービスタグ管理にサービスタグが追加されていれば、サービスタグの追加は完了です。
   

2. ページの設定と有効化

Yahoo!タグマネージャーではサービスタグを追加した後、タグを表示するページを指定する必要があります。

1. サービスタグ管理 -> タグの詳細ページ -> ページの設定タブを開きます。こちらからページの設定が可能です。
   
2. すでに作成済みのページを設定する場合は、未設定のボタンを押すことでページを設定することができます。
   
3. ページが設定されると、設定済みと表示されます。この場合、設定したページのURLでタグが配信できるようになります。
   
4. すでに作成しているページがない場合は、インプットの設定から新しいページを追加することができます。ページ名・URLパターンをご設定ください。詳しい設定方法はYahoo!タグマネージャー公式ヘルプのページを設定するをご参照ください。
   
5. 最後に、タグの詳細ページの右上メニューを「有効」にすることで、タグの配信が開始されます。
   

タグが正常に動作しているかを確認する

タグが正常に動作しているかについては、ブラウザ標準の開発者ツールを利用して確認します。

1. JSを設置したページをブラウザ(Google Chrome推奨)で開きます。そして右クリック > 検証 でネットワークの確認をします。タグが正常に配信されている場合は、cdn.kaizenplatform.comのドメインのJavaScriptファイルがブラウザで確認することができます。
   
2. 次に、グローバル変数が正しく定義されているか確認します。コンソールで、window.kzsを押した場合にundefinedが表示されないことをご確認ください。もし、undefinedの状態になっている場合は、URLに?kz_namespace=kzs&kz_async=ytmが追加されていない可能性があります。設定内容を再度ご確認ください。
   

上記をご確認いただいて問題なければ、タグは正常に動作いたします。

チェックリスト

もし設定がうまくいかない場合は、以下の項目をご確認ください。

参考

なお、Yahoo!タグマネージャーのその他の機能についてはYahoo!タグマネージャーの公式ヘルプページをご参照ください。

• Yahoo!タグマネージャーを学ぶ
• Yahoo!タグマネージャー公式ヘルプ