AdWords が「Google 広告」になりました。これまで AdWords としてご利用いただいていたサービスの名前が「Google 広告」に変わりました。検索ネットワーク、ディスプレイ ネットワーク、YouTube などを対象にあらゆる広告サービスを提供いたします。詳細

303 人が現在オンライン
303 人が現在オンライン
Google アナリティクスのアカウント設定、プロパティ、ビューやフィルタ設定などについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合って、よりデータ分析の知識を高めていきましょう。
ガイドを表示
star_border
返信

タグマネージャーのオプティマイズ非表示スニペット設置について

初級者 ✭ ✭

オプティマイズのページ非表示スニペット設定についての質問です。
タグマネージャーで、アナリティクスやオプティマイズを導入しているのですが、
ページ非表示スニペットは、dataLayerのあるタグマネージャーの後ろに設定をするの正解でしょうか?

 

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->


<!-- Page-hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXXX':true});</script>

 

こちらを参考にしたのですが、よく分からず...。
https://support.google.com/optimize/answer/6314801
https://support.google.com/optimize/answer/7359264
https://support.google.com/optimize/answer/7100284


どなたかご回答いただけますと幸いです。
宜しくお願い致します。

1 件の受理された解決策

受理された解決策
ベストアンサーのマーク済み.
解決策
トピック作成者未来さくらさんが付与
木曜日

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

レジェンド
こちら、私の方でもGTMオンリーでの実装を試してみました。
その結果、さくらさんと同じ警告が出ることを確認しました。

こちらの方は「エラー」ではなく「警告」なので全てのテストページに貼り付けるページ非表示スニペットにおいて「オプティマイズのコンテナ ID(GTM-54~)は使用していなければ」問題ありません。

おそらく、上記を誤るとページが白いママ(非表示のママ)になる恐れがあるので、Google推奨(GTMではなくOptimizeスニペットの直貼り)の方法で実装していないユーザーには必ず表示しているものと思われます。Optimizeではエディターページとして指定したURLのみ、確認しているため、他のページにあった場合は知らんよ、気をつけろという感じで「警告」としているのではないでしょうか?

テストには問題なさそうです(以下検証ページ)。
http://abc.go2020.tokyo/optimize/index4.html
Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

元の投稿で解決策を見る

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

レジェンド

以下の件ですが、貼り付けていただいたコードを拝見する限り、

オプティマイズのページ非表示スニペット設定についての質問です。

タグマネージャーで、アナリティクスやオプティマイズを導入しているのですが、
ページ非表示スニペットは、dataLayerのあるタグマネージャーの後ろに設定をするの正解でしょうか?

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

上記、GTMのスニペットの前に設置してください。

ページ フリッカーのリスクを軽減する効果的な方法は、オプティマイズのコンテナの読み込み中に一時的にページを非表示にすることです。これは、ページを非表示にするスニペットをページの最初のスニペットとして、<meta charset> 宣言の後、オプティマイズ、アナリティクス、タグマネージャのタグの前に追加することで行えます。

上記のように、<head>内の文字コード指定のmetaタグ以降に張り付けることでページフリッカーの低減の効果を最大限発揮することができます。

 

以下のコード全体をコピーして、オプティマイズですべてのページの <HEAD> 内のなるべく前方に追加します。ただし、dataLayer 宣言を使用している場合は、その後に追加します。
ページを非表示にするスニペットの直後に、変更済みの Google アナリティクス トラッキング コードが設定されていることを確認します。
オプティマイズのページを非表示にするスニペットは次のようになります。

こちらで「dataLayer 宣言を使用している場合」は、以下のケースです。

 

https://support.google.com/optimize/answer/6301794?hl=ja

 

実際のdataLayer宣言は以下のようなコードです。

<script>
  dataLayer = [{
    'purchaseTotal': 451
  }];
</script>

こちらはGTMや、オプティマイズに変数を引き渡す処理となっていて一般的にサーバーサイドでユーザー毎や各種条件毎に変数の値を変えてだして、オプティマイズで実施するテストパターンを選択したり、表示を切り分けたりするために使います。なので、オプティマイズ関連のタグの前に置くことが求められているかと思います。GTMの場合は非同期でdataLayer関連のトリガが走るのでどちらでも良いケースが多いですが。

 

おそらく、GTMのインストールの標準スニペットにdataLayerの記述がたくさん入っているので不安になったのかと思いますが、上記でご理解いただけましたでしょうか?

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

初級者 ✭ ✭

ご丁寧に回答していたき、有難う御座います。

上記、GTMのスニペットの前に設置してください。

GTMの前に非表示スニペットを設置しましたが、以下のエラーが表示されました。非表示スニペットエラー.png

 

 

 

 

そこで追加で質問がございます。

ページを非表示にするスニペットは、ページの <HEAD> のなるべく前方(オプティマイズ プラグインの変更済みの Google アナリティクス トラッキング コードの直前)に追加します。

https://support.google.com/optimize/answer/6314801

 

GTMでアナリティクスを導入しているため、アナリティクスのコードを直接書き込んでいないのですが、オプティマイズ プラグインの変更済みの Google アナリティクス トラッキング コードの認識でよいのでしょうか?

 

また、dataLayer宣言を使用しており、以下のようになっております。

<head>


<!-- Page hiding snippet (recommended) -->

</script>

 

<!-- Google Tag Manager -->

<!-- End Google Tag Manager -->

 

<script type="text/javascript">
var dataLayer = [];
dataLayer.push({
'PageType': 'Homepage',
});


</script>


</head>


<!-- Google Tag Manager (noscript) -->

<!-- End Google Tag Manager (noscript) -->

 

お手数おかけしますが、ご確認いただき追加でご回答いただけますでしょうか?
宜しくお願い致します。

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

レジェンド

ご回答にも書かせていただきましたが「dataLayer 宣言を使用している場合は、その後に追加します。」とのことですので、以下の箇所は最も上に記述すべきです。

 

<script type="text/javascript">
var dataLayer = [];
dataLayer.push({
'PageType': 'Homepage',
});
</script>

また、GTMでユニバーサルアナリティクスタグを配信されているということですが、GTMでOptimizeタグを配信する場合を除いて、カスタマイズしたanalytics.js版のOptimizeインストールスニペット(以下)は必要になります。

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-122319658-20', 'auto');
  ga('require', 'GTM-KS4TMRW');
  //ga('send', 'pageview'); ※アナリティクスをGTM配信する際はコメントアウト
</script>

 

dataLayer定義、ページ非表示スニペット、Optimize(analytics.js)スニペット、タグマネージャーの順番については、以下をご参照ください。

https://support.google.com/optimize/answer/7359264?authuser=0#tagging-best-practices

 

試しに、以下のページにOptimizeをインストールしてみましたのでよろしければソースをご参照くださいませ。

http://abc.go2020.tokyo/optimize/

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

初級者 ✭ ✭

ご回答いただき有難う御座います。
ソースを参考に変更しました。大変分かりやすく解説していただき感謝しております。

 

現在、以下のような「ページ非表示スニペットの設定エラー」が表示されます。設定エラー.png

 

 

 

ページ非表示スニペットはタグマネージャのコンテナ ID(GTM-MV~)を使って設定し、オプティマイズのコンテナ ID(GTM-54~)は使用しないでください。

オプティマイズのコンテナ ID(GTM-54~)は使用していないのですが、なぜこのような表示が出るのでしょうか?

0810.png

 

 

 

 

大変お手数おかけしますが、再度ご返信いただけますと幸いです。

宜しくお願い致します。

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

レジェンド

 

もう少しですね。確認させていただきたいのですが、以下のヘルプをご参照いただいているということは、Googleとしては非推奨のGTMですべてのオプティマイズタグの実装をされているということでよろしかったでしょうか?※ソース上にはオプティマイズのコンテナIDは無い状態

ページ非表示スニペットはタグマネージャのコンテナ ID(GTM-MV~)を使って設定し、オプティマイズのコンテナ ID(GTM-54~)は使用しないでください。

Google タグマネージャを使ってオプティマイズ タグを配信する

https://support.google.com/optimize/answer/6314801

そちら、私の方で検証したことがないので、もし上記でしたら、一度検証してみます。

 

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません
ベストアンサーのマーク済み.
解決策
トピック作成者未来さくらさんが付与
木曜日

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

レジェンド
こちら、私の方でもGTMオンリーでの実装を試してみました。
その結果、さくらさんと同じ警告が出ることを確認しました。

こちらの方は「エラー」ではなく「警告」なので全てのテストページに貼り付けるページ非表示スニペットにおいて「オプティマイズのコンテナ ID(GTM-54~)は使用していなければ」問題ありません。

おそらく、上記を誤るとページが白いママ(非表示のママ)になる恐れがあるので、Google推奨(GTMではなくOptimizeスニペットの直貼り)の方法で実装していないユーザーには必ず表示しているものと思われます。Optimizeではエディターページとして指定したURLのみ、確認しているため、他のページにあった場合は知らんよ、気をつけろという感じで「警告」としているのではないでしょうか?

テストには問題なさそうです(以下検証ページ)。
http://abc.go2020.tokyo/optimize/index4.html
Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: タグマネージャーのオプティマイズ非表示スニペット設置について

初級者 ✭ ✭
丁寧に解説していただき有難う御座います。
実際に非表示スニペットは問題なく機能しているようなので、気をつけてという「警告」で受け取ります。

この度は何度もこちらの質問に回答していただき、本当に有難う御座いました。
また機会がありましたら、宜しくお願い致します。