「Juicerタグってタグマネージャ越しでも使えるの?」というご質問をたびたび頂きます。
JuicerタグはYahoo!・Google両タグマネージャに対応しておりますので、タグマネージャの中に追加していただいても正常に機能いたします。

本記事では、各種タグマネージャへのJuicerタグの追加方法をご案内します。

 

Juicerタグを準備する

お客様のサイト専用のJuicerタグは、Juicerの画面から入手していただくことができます。
Juicerにログイン後、画面右上の歯車マークをクリックし、「埋め込みタグ」を選択してください。
管理画面へ
お客様のサイト専用のJuicerタグが発行されています。「タグをコピーする」をクリックするとコピーできます。
埋め込みタグ

 

Googleタグマネージャをお使いの場合

ここでは、GoogleタグマネージャにJuicerタグを追加する方法をご案内します。

1. Juicerタグをタグマネージャに追加する

https://tagmanager.google.com/より、Googleタグマネージャの管理画面にログインします。画面左上にJuicerタグを追加したいサイトのドメインが表示されていることを確認し、「新しいタグ」をクリックします。
ワークスペース_新しいタグ
右側からウインドウが現れるので「タグの設定」をクリックします。
タグの設定_タグの設定
更に右側からウインドウが現れます。ここからタグマネージャに追加するタグのタイプを選択します。Juicerタグを追加する場合は「カスタムタグ」を選択します。
タグ選択_カスタムタグ
入力画面が表示されますので、こちらにお客様のサイト専用のJuicerタグを貼り付けます。
Juicerタグの入手方法については、こちらをご確認ください。
カスタムタグの貼り付け_レイヤーなし
Juicerタグを貼り付けたら、すぐ下にある「document.write をサポートする」にチェックを入れておきます。
documentwriteをサポート_レイヤーなし

「document.write をサポートする」とは?
サイト内のソースコードの書き換えを行なうタグをタグマネージャに追加する場合、チェックを入れる必要があります。JuicerタグはA/Bテストの実施時などにソースコードを必要に応じて書き換えることがありますので、念のためチェックをお願い致します。

次に、「トリガー」をクリックします。
追加したタグが、どんな条件のときに作動するかを指定する項目です。

トリガーの設定_レイヤーなし
右側から「トリガーの選択」というウインドウが現れるので、通常は「All Pages」を選択します。サイト内のどのページでもタグが作動する設定です。
allpages_レイヤーなし
トリガーの指定が完了したら、画面右上の「保存」ボタンをクリックします。
保存_レイヤーなし
「タグ名の変更」という画面が表示されるので、運用しやすいように名前をつけておきます。
タグ名の変更
保存が完了すると、ワークスペースの画面に戻ります。「ワークスペースの変更」という箇所にJuicerタグが追加されています。
追加されました_レイヤーなし
ただし、この状態ではまだ追加したタグは有効になっていません。タグを有効にするには、「タグマネージャを有効にする」の手順をご覧ください。

2. Juicerタグが動作しているか確認する

ワークスペースから、画面左側の「タグ」をクリックします。
タグをクリック_レイヤーなし
タグを管理する画面が表示されます。先ほど追加した「Juicerタグ」が表示されています。
画面右上の「公開」の右にある「▼」をクリックします。
※ 「公開」ボタンが赤色のときは、まだタグマネージャは有効になっていません。
タグ管理の画面_レイヤーなし
プルダウンでメニューが開きます。「プレビュー」をクリックするとプレビューモードになり、実際のサイトでの動作を確認することができます。
公開をクリックしたとき_レイヤーなし
ワークスペースの画面に自動で戻ります。画面にオレンジ色の表示が出ている間はプレビューモードになっています。
プレビューモード_レイヤーなし
この状態で、ブラウザで別のタブを開き、対象のサイトにアクセスしてみましょう。
プレビューモードの状態でサイトにアクセスすると、ウインドウ下部にGoogleタグマネージャの画面が表示されるはずです。
「Tags Fired On This Page:」の箇所に「Juicerタグ」(設定した名前で表示されます)が表示されていたら、追加したタグがそのページで正常に動作するということを意味します。
タグ発火_レイヤーなし
タグの動作が確認できたら、Googleタグマネージャの画面に戻り、「プレビューモードの終了」をクリックします。
プレビューモードの終了_レイヤーなし

3. タグマネージャを有効にする

プレビューモードを終了すると、「タグ」の画面に戻ります。もう一度「公開」の右にある「▼」をクリックし、今度は「公開」ボタンをクリックします。
公開するとき_レイヤーなし
右側からウインドウが現れます。「バージョンの設定」という箇所で、タグマネージャに変更を加えるたび、その情報をメモと共に残しておくことができます。必要に応じて、どんな変更を加えたかを記入しておきます。
タグのメモ_レイヤーなし
記入が終わったら、画面右上の「公開」ボタンをクリックして、タグマネージャを有効にします。
公開_レイヤーなし
公開が完了すると「バージョン」の画面に遷移します。先ほどタグマネージャに加えた変更の内容が、メモと共に反映されています。
バージョン管理_レイヤーなし

 

Yahoo!タグマネージャをお使いの場合

続いて、Yahoo!のタグマネージャをお使いの場合に、Juicerタグを導入していただく手順をご紹介します。

1. Juicerタグをタグマネージャに追加する

https://promotionalads.business.yahoo.co.jp/ より、Yahoo!のプロモーション広告管理画面にログインし、「運用サポートツール」をクリックします。
※ Yahoo!のタグマネージャをご利用になるには、Yahoo!のプロモーション広告のご利用が必須となります。
yahoo広告管理ツールダッシュボード_レイヤーなし
さらに、「Yahoo!タグマネージャー」のタブをクリックし、対象のアカウントの「ログイン」ボタンをクリックします。
yahooタグマネージャーアカウント一覧_レイヤーなし
Yahoo!タグマネージャーの「ダッシュボード」が表示されます。タグマネージャにJuicerタグを追加するには、左のナビゲーションより「サービスタグ管理」をクリックします。
タグマネージャトップ_レイヤーなし
現在タグマネージャで管理しているタグのステータスが表示されます。新たにタグを追加するには、画面右側の「サービスタグを追加」をクリックします。
サービスタグ管理_レイヤーなし
さらに、画面右側の「スマートカスタムタグを追加」をクリックします。
サービスタグを追加_レイヤーなし
新規タグを追加する画面が表示されますので、タグの名前タグの提供元を入力し、「サービスタグ情報」という欄に、お客様のサイトのJuicerタグを貼り付けます。
スマートカスタムタグの追加_レイヤーなし
*」のついた必須項目3箇所が入力できたら、画面下部の「サービスタグを保存」をクリックして次へ進みます。
サービスタグを保存_レイヤーなし
次に「インプットの設定」という画面が表示されます。追加したタグがどのページで発動するようにするか?の設定です。
Juicerタグはサイト内のすべてのページでの実行が望ましいので、「全ページ」の右側にある「未設定」をクリックして有効にします。
インプットの設定_レイヤーなし
「設定済み」の状態になったことを確認したら、「保存して次へ」をクリックするとJuicerタグがタグマネージャに追加されます。
インプット設定した後_レイヤーなし
ただし、この状態ではまだ追加したタグは有効になっていません。タグを有効にするには、「タグマネージャを有効にする」の手順をご覧ください。

2. Juicerタグが動作しているか確認する

Juicerタグをタグマネージャに追加し終わると、下記のような画面が表示されます。画面上部にある「プレビューモードで動作確認する」をクリックします。
サービスタグ追加直後_レイヤーなし
別ウインドウで下記のような画面が開きますので、プレビューモードが「オン」になっていることを確認します。
プレビューモードのウインドウ
プレビューモードがオンになっていることを確認したら、この状態でブラウザの別タブを開き、対象のサイトにアクセスしてみましょう。
直後に再度タグマネージャの管理画面に戻り、「サービスタグ実行数」の数字が増えていたら、Juicerタグが正常に動作している証拠です。

動作確認_レイヤーなし

3. Juicerタグを有効にする

プレビューモードで正しく動作することを確認できたら、Juicerタグを有効にする操作に移ります。
先ほどの画面で「プレビュー」と表示されている箇所をクリックします。
プレビューをクリック_レイヤーなし
プルダウンでメニューが表示されるので「有効」をクリックします。この操作をもって初めてJuicerタグが本当に動作するようになります。
有効にする_レイヤーなし
画面上部の表示が「有効」になったら、Juicerタグの設定作業は完了です。
有効化した後_レイヤーなし
念のため、「ダッシュボード」から「サービスタグのエラー」「ページのエラー」が共に0件になっていることも確認しておくとよいでしょう。
ダッシュボード_レイヤーなし
これで作業は完了です。

 

Google、Yahoo!いずれのタグも、
・ Juicerタグがサイト内の全ページで動作するようになっているか?
・ Juicerタグが(プレビューモードでなく)有効な状態になっているか?

の2点をチェックすることがポイントとなります。

タグマネージャをご利用の場合は、上記手順をお役立てください。