これで完璧!Googleオプティマイズをタグマネージャー(GTM)で管理する全手順

SPONSORED LINK

こんにちは、データアナリストのたぬ(@tanuhack)です!

タグマネージャーでオプティマイズタグを管理するためには、タグが発火される順番(アナリティクスタグよりもオプティマイズタグを先に読み込ませる等)を気をつけないと思わぬエラーが発生してしまいます!

(私は、2時間くらい謎のエラーと戦っていました、泣)

そこで今回は、お手軽A/Bテストの最強ツールである『Googleオプティマイズ』の導入編として、GoogleオプティマイズタグをGoogleタグマネージャーで管理する全手順を紹介します。

注意
タグマネージャーの基本的な使い方や初期設定の方法などは割愛させていただきます。あしからず

タグマネージャーの設定

タグマネージャー(GTM)でオプティマイズのタグを管理するためには、次の2つのIDが必要です。

  • Googleオプティマイズ コンテナID:GTM-XXXXXX
  • Googleアナリティクス プロパティID:UA-XXXXXXXX-XX

この2つのIDは、オプティマイズの管理画面で確認できます。

manage-gtm1

2つのIDが用意できたらGoogleタグマネージャーを開いて、新規のタグを作成します。

manage-gtm2
ワークスペース>タグ>新規

オプティマイズタグの設定

STEP1:オプティマイズタグを選択する

おすすめの中から『Google Optimize』を選択します

manage-gtm3

STEP2:2つのIDを入力して保存する

  1. オプティマイズコンテナID
  2. アナリティクストラッキングID
  3. トリガーを設定せずに保存

の順番でオプティマイズタグの設定をします。

manage-gtm4

トリガーが選択されていません」という警告アラートが表示されますが、そのまま『タグの保存』を選択し、保存します。

manage-gtm5
補足
オプティマイズタグのトリガーは、アナリティクスタグのときに設定するので、トリガーがないわけではありません。安心してください。

アナリティクスタグの設定

次にアナリティクスタグの設定をします。

自分がタグマネージャーに登録しているアナリティクスタグを開きましょう。

STEP1:アナリティクスタグの詳細設定を選択する

なぜか詳細設定が2つありますが、下の方を選択して下さい。

manage-gtm6

STEP2:オプティマイズタグをアナリティクスタグより先に発火させる

『詳細設定』の中にある『タグの順序付け』という項目で、タグ発火の順番を決めることができます。

オプティマイズタグをアナリティクスタグより先に発火させないと、アナリティクスのリアルタイムレポートでエラーが発生する恐れがあるので、必ずオプティマイズタグを先に発火させましょう。

manage-gtm7

公開する

オプティマイズタグとアナリティクスタグの設定が終わったら『公開』を選択します。

manage-gtm8

以上の設定で、Googleタグマネージャー上で、オプティマイズタグを設定する方法が完了しました。

アンチフリッカースニペットの設置

<!-- 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

アンチフリッカースニペットは、Googleオプティマイズによる画面のつらつきを軽減するために必要なプログラムです。

補足

オプティマイズはWebサイトを読み込んだあと、JavaScriptでHTML要素を上書きしています。

そのため、テストパターンを読み込んだ際にパッパっと画面がちらつくことがあります。それを防ぐプログラムがアンチフリッカースニペットです。

アンチフリッカースニペットを修正する

manage-gtm10
Googleオプティマイズ公式

アンチフリッカースニペットはそのままの状態では使えません。

上図のように、GTM-XXXXXXの部分を自分のタグマネージャーのコンテナIDに修正します。

アンチフリッカースニペットを設置する

修正したアンチフリッカースニペットは、タグマネージャーよりも先に読み込ませなければいけない点に注意して、サイトに直張りします。

manage-gtm9

以上で、GoogleオプティマイズとGoogleタグマネージャー関連の設定が完了しました。

お疲れ様でした。

最後に

今回は、Googleタグマネージャーでオプティマイズタグを管理する方法を紹介しました。

こういったシステム関係は初期設定が一番難しかったりしますよね…。

それでは、Googleオプティマイズで良いA/Bテストライフを!

SPONSORED LINK

ABOUTこの記事をかいた人

たぬ

26歳。作業の90%をPythonにやらせているデータサイエンティスト兼ブロガー。 単純作業を自動化させ、クリエイターの生産性を上げるために当ブログを設立。毎月15万人に読まれています。 ストレングスファインダー:戦略性・最上志向・目標志向・未来志向・個別化