超簡単に解説!Googleオプティマイズを設定してWordPressに実装する方法
ども! ブログマーケッターのジュンイチです。(Junichi_Santa)
今回は、Googleオプティマイズという無料のウェブテストができるツールを、あなたのWordPressサイトに実装する設定方法を解説します。
初心者さんにはハードルが高いかもしれませんが、この記事の手順通り進めてもらえたら設定できます!
是非落ち着いて、一緒に作業を進めていきましょう。
- Googleオプティマイズでできること
- Googleオプティマイズの導入に必要な手順
- Googleオプティマイズを導入しよう
- STEP1. オプティマイズのアカウントを作る
- STEP2. タグマネージャでオプティマイズのタグを設定する
- STEP3. あなたのWordPressサイトにコードを追加
- あなたのタグマネージャのコンテナIDの調べ方
- パターン1. WordPressテーマELEPHANT3、Seal、Giraffeをお使いの方
- パターン2. それ以外のWordPressテーマをお使いの方
- STEP4. オプティマイズのインストール状況の確認
- まとめ:次回からは、実際にオプティマイズを使ってウェブテストを作ってみよう!
Googleオプティマイズでできること
オプティマイズって何? 何ができるの?っていうのは、Googleオプティマイズとは?成果を上げたい人ほど使ってほしい最高の分析ツールで詳しく解説しています。
まずはそちらも参考にしてみてください。
「そんなことわかってるぜ!早く設定しようぜ!」
っていうあなたは、早速一緒に設定をしていきましょう。
Googleオプティマイズの導入に必要な手順
少なくともこの2つは、予めやっておく必要があります。
- Googleタグマネージャを導入
- Googleアナリティクスの設置
以下の記事で、1、2それぞれ詳しく解説していますので、まだできていなければ先にそちらをやってみてください。
ここまでできている方は、以下の作業に進みましょう!
Googleオプティマイズを導入しよう
さぁでは、Googleオプティマイズを実装していきましょう。
大きなステップとしては、
- STEP1. オプティマイズのアカウントを作る
- SETP2. タグマネージャでオプティマイズのタグを設定する
- STEP3. あなたのWordPressサイトにコードを追加
- STEP4. ちゃんとインストールできたかチェックする
という大きな4つのステップです。では、実際にやっていきましょう!
STEP1. オプティマイズのアカウントを作る
それでは、画像を使って解説をしていきます。
まずは、Googleマーケティングプラットフォームへ行きます。
↓するとこんな画面になるので真ん中の青いボタンを押してログインします。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/34e0ff2bd119e81509b68694af28bfe1.png)
↓ オプティマイズを初めて使う時はメニューが隠れているので「他のサービスの情報」の『Googleマーケティングプラットフォームサービス』をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/03bf41b799389cb6376075c5fa76e2e2.png)
↓オプティマイズのメニューが見つかると思うので、『設定』をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/87886eff036c3ea61ac21206dc6beece.png)
↓ようこそと出るので、「利用を開始」をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/48871705b76e08839e2120c4a0743a8d.png)
↓ ここは、「はい」「いいえ」どちらでもOKですが、僕は一応全てはいにしています。チェックが出来たら『次へ』をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/6ef7952463a78fbb262b78c2ac0af702.png)
↓ 次の画面では、国を日本に変更、規約に同意チェックが3つあるので全てにチェック。できたら『完了』をクリックしましょう
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/a4d0b90915ae6a1d058ec28383d37fab.png)
↓ するとこんな画面になります。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/6d8e2e22774852bc86d7660c50e03475.png)
↓ 右上にある『エクスペリエンスを作成』という青いボタンをクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/4381bad0a27ea81bdf7722d8fb95b036.png)
↓ これは本来ウェブテストを作る画面ですが、今回はオプティマイズの導入をしたいので、適当に作ってOKです。
名前「テスト」、使用するページのURL「あなたのブログのURLなんでもOK」、作成すするテストのタイプ「A/Bテスト」を選んで「作成」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/8b250cc39e96ffec6d96d25ce8be851a.png)
↓ 続いて画面が切り替わるので、右の方の「Googleアナリティクス」の中の「コンテナページに移動」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/d86f4b64ec0e42dc7626d9988ba6d5f1.png)
↓右の方に出る「Googleアナリティクスへのリンク」の中の『プロパティにリンク』をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/215d6baa675491b183531a8eb9785c88.png)
↓ 『プロパティにリンク』が出てくるのでクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/googleoptimize1.png)
↓ Googleアナリティクスのプロパティというところに「プロパティを選択 ▼」があるのでクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/900fd40f28b2b79f17b792d57c62b0df.png)
↓ ここで、アナリティクスのあなたのプロパティが出てくるので選択。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/63d53436693d1cd4b063faf3f70c2189.png)
↓ 選んだら右上の『リンク』をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/6f6b14f32b84a6626f506406a2b89d1b.png)
↓ 次にオプティマイズのスニペットをサイトに追加しますか?と出るので、『今回はスキップ』をクリック。
一旦ここで、オプティマイズでの画面の設定は中断です。
別のタブで、Googleタグマネージャのサイトを開きましょう!
STEP2. タグマネージャでオプティマイズのタグを設定する
では、別のタブでGoogleタグマネージャを開きます。
↓このようなワークスペースの画面までいきましょう。そんでもって左の方の『タグ』をクリックします。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/b085ae8dff5ffb1d7144b6d559b469a8.png)
↓ 『新規』の赤いボタンをクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/21c298ed80a95bcb325febf944585066-e1541126058785.png)
↓左上の名前を『オプティマイズタグ』などと分かりやすい名前に変更しましょう
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/924efd5acf74cfeda4bf01514763357c.png)
↓ 次に、タグの設定のエリアのどこでもいいのでクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/4dd9ca621bf6340a42facadbc6db4a4f.png)
↓ 右の方から出てくるメニューに『Google Optimize』というのがあるのでクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/2a64266f1916a8352e5764d5805e3dd4.png)
ここで、一旦オプティマイズのサイトに戻ります。
↓ オプティマイズのサイトの右の方にコンテナ情報があって、GTM-XXXXXXXというあなただけのコードがあるのでコピーしましょう。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/9d2d8e260fe27877c6cb4c3bea6e2622.png)
ここで、またタグマネージャのサイトのサイトに戻ります。
↓ さきほどコピーしたコードを、オプティマイズコンテナIDのところに貼りましょう。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/dc5d58655be39e179a65518607059803.png)
↓ Googleアナリティクス設定のところは、あなたがアナリティクスの設定をした時に作った変数を選びます。たぶん出てくると思います。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/930800334441245092ec24af3bfd149a.png)
↓ 右上の『保存』をクリック
↓ トリガーが選択されていません、と出ますが『タグを保存』でOKです。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/14ebf97ae6901fbc34c8bf8db2b0944c.png)
↓ 次に、タグの一覧からあなたが以前にGoogleアナリティクスを設置する時に作ったタグを選択します。
(※名前はあなたが付けているはずです。「Googleアナリティクスタグ」など)
![](https://junichi-manga.com/wp-content/uploads/2018/11/6d784906294849e8e167bc784fa8d5e6.png)
↓ 以前に設定したものが出てくるので、タグの設定のエリアならどこでもいいのでクリック
↓「> 詳細設定」をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/d52e02dcb2f381816d27f55ccd5264e4.png)
↓「> タグの順序付け」をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/22137cfa7c32fdcf8b95e4bf3aee82c1.png)
↓ 「あなたがGoogleアナリティクス用に設定したタグ名」が発効する前にタグを配信 の方にチェック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/1c46e0de64172b241a3d05dc8349e63f.png)
↓ 設定タグを選ぶところが出てきます。『タグを選択』をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/d0f3ec347d503fe25f3dfe45aa423093.png)
↓ ここで先ほど作った『オプティマイズタグ』が出てくるので、選択。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/7875b1445b6e812131d766836ce7b655.png)
↓ これで右上の「保存」をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/d4f54684d35d36ae18d48b57c67c7586.png)
↓ 右上の「公開」ボタンをクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/92ce293550be96a7331295e769095563.png)
↓ バージョン名・バージョンの説明を分かりやすく「オプティマイズタグ設置」などと入力して、右上の「公開」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/350822b55233a19f8be26aa5f4ed4228.png)
これで一旦タグマネージャでの作業は終了です!
次はあなたのWordPressサイトに移動しましょう!
STEP3. あなたのWordPressサイトにコードを追加
次に、以下のコードをあなたのサイトの<head>タグの中のなるべく上の方に追加します。
これを追加したほうが、ウェブテストのページがスムーズに表示されるようになります。
<!-- 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>
※上のコードでうまくオプティマイズが動かない場合は、以下のコードもためしてみてください↓↓
<!-- Anti-flicker 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> <!-- 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>
あなたのタグマネージャのコンテナIDの調べ方
↓タグマネージャのトップページに行くとこんな画面があります。ここであなたのアカウントが調べられます。(GTMXXXXXX)の部分。
では、あなたのWordPressサイトに行きましょう!
<head>タグの中にコードを追加するので、お使いのWordPressテーマによってやり方は違います。
パターン1. WordPressテーマELEPHANT3、Seal、Giraffeをお使いの方
↓「外観」 ⇒ 「カスタマイズ」をクリック。
![optimize](https://junichi-manga.com/wp-content/uploads/2018/11/optimize12.png)
↓ 「便利設定」をクリック
![optimize](https://junichi-manga.com/wp-content/uploads/2018/11/optimize13.png)
↓ headタグという中に先ほどコピーして、GTMXXXXXXXをあなたのコードに変更したものを貼付けます。
![optimize](https://junichi-manga.com/wp-content/uploads/2018/11/optimize14.png)
↓ 次に『公開』ボタンをクリックして完了です!
![optimize](https://junichi-manga.com/wp-content/uploads/2018/11/optimize145.png)
WordPressテーマELEPHANT3、Seal、Giraffeをお使いの方はこれでSTEP4に行きましょう!
パターン2. それ以外のWordPressテーマをお使いの方
次に、それ以外のWordPressテーマをお使いの方です。
↓「外観」⇒「テーマの編集」をクリック。
![それ以外のWordPressテーマを使っている場合](https://junichi-manga.com/wp-content/uploads/2018/07/81.png)
↓右上の「編集するテーマを選択」で親テーマを選びましょう。
![それ以外のWordPressテーマを使っている場合](https://junichi-manga.com/wp-content/uploads/2018/07/82.png)
↓ 次に『テーマヘッダー(header.php)』をクリックします。
![それ以外のWordPressテーマを使っている場合](https://junichi-manga.com/wp-content/uploads/2018/07/83.png)
↓<head>という部分を見つけましょう。
![それ以外のWordPressテーマを使っている場合](https://junichi-manga.com/wp-content/uploads/2018/07/84.png)
↓見つけたら、その1行下に空白の1行を空けましょう。ここにコピーしたコード(GTMXXXXXXはあなたのタグマネージャのコンテナID)を貼りつけて、下の方にある「ファイルを更新」ボタンを押して完了です。
![それ以外のWordPressテーマを使っている場合](https://junichi-manga.com/wp-content/uploads/2018/07/85.png)
WordPressテーマELEPHANT3、Seal、Giraffe以外をお使いの方はこれでSTEP4に行きましょう!
STEP4. オプティマイズのインストール状況の確認
では、最後にちゃんとオプティマイズがインストールできているか? チェックをしましょう。
オプティマイズのサイトに戻りましょう!
↓ 先ほど適当に作った「テスト」みたいなものをクリックしてください。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/09e5bdfbde601f134017444985c3bd80.png)
↓ 右上の鉛筆?ペンマークのボタンをクリックします。
↓ Googleアナリティクスビューの部分の「ビューを選択」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/f1b828af3a6f7f03b884ab9d3297259d.png)
↓「すべてのウェブサイトのデータ」をクリック
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/f087f3fe3d64c4817b3fdcd710e25f89.png)
↓ 右上の『完了』をクリックします。
↓ 次に右の方に出てくるオプティマイズのインストール状態未検証という部分の「診断を実行」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/b990982587af615ef626b34a207c903e.png)
↓ これで「オプティマイズは正しくインストールされています」と出ればOKです!「詳細に戻る」をクリック。
![google optimize install](https://junichi-manga.com/wp-content/uploads/2018/11/0fbc4c17969d6c92adcf695d425e3359.png)
意味がわからなかったかもしれませんが、これでオプティマイズの導入は完了です!
お疲れ様でした!
まとめ:次回からは、実際にオプティマイズを使ってウェブテストを作ってみよう!
大変でしたか!?
初めてだとわけが分からなかったかもしれませんが、この通りにやってもらえたらオプティマイズでウェブテストができるようになります。
今回は、下準備だけで、オプティマイズを実装しただけです。
次回からは、さっそくA/Bテストなどのウェブテストを作る方法を説明していきますね!