Googleオプティマイズの設定方法 ~インストールからテキスト編集~

目次

Googleオプティマイズとは

Google広告やYahoo広告といった運用型広告で成果をだすには、ABテストがかかせません。
広告を運用するのであれ、自然検索で流入してもらうのであれ、リンク先のページが最適化されていないとユーザーは離脱してしまいます。
そうならないためにもABテストは必須のものとなりつつあります。

今回ご紹介するGoogleオプティマイズはGoogleが提供するABテスト用のツールです。
Googleオプティマイズを使用することで次のようなメリットがあります。

  • 無料でABテストを実施できます。制作会社にテスト用のページの制作依頼をしなくてすみます。
  • HTMLやCSSがわからなくてもテキストの変更やカラーを変えることができる。
  • スピーディーに編集し、実行できる。

ABテストを実施したいけど高い費用がかかる、オプティマイズを使ってみたいけど設定方法などよくわからないという方に、この記事を参考にしていただけたらと思います。

Googleオプティマイズを設定する

まずは公式ページから始まります。
Googleオプティマイズへはこちらからどうぞ。

https://marketingplatform.google.com/intl/ja/about/optimize/

Googleオプティマイズの公式サイトにアクセスし、「無料で利用する」をクリックします。
次のように表示されます。

「開始」をクリックすると次の工程に進みます。

開始ボタンの下にある「初めてのエクスペリエンス作成について」をクリックするとヘルプページが表示されます。
「「Working with Optimize」の動画再生リストをチェック」をクリックすると、次のようなYou Tube内にある説明動画一覧ページにリンクします。
ここではそのまま開始ボタンをクリックします。

開始ボタンをクリックすると次のようなエクスペリエンス作成画面が表示されます。
エクスペリエンスとはこれから行うテストの容れもののようなものです。
エクスペリエンスの中に複数のテストを
エクスペリエンスごとに名称を設定するので他のものと区別がつくようにわかりやすい名称を設定します。

次にテストするサイトのURLをコピペし、テストのタイプを指定します。
この記事ではエクスペリエンスの名称に「テスト」、URLを https://www.issun.com/ 、タイプを「A/Bテスト」とします。
各項目を埋めて、Enter を押すと次の画面に進みます。

テストの詳細が表示されます。上記の作業でオプティマイズ内のコンテナにエクスペリエンスが作成されたことになります。
この段階では下書き状態なので、引き続き以下の手順を行います。

①サイトをカスタマイズ
 オプティマイズ上でテストする箇所の設定を変更します。例えばバナーの効果をテストする場合は、オプティマイズ上でバナーを変更します。
②ターゲット設定ルールの追加
③アナリティクスへリンクする
④目標の設定
⑤開始時期を指定

これらはこの順番に行う必要はありません。
適宜、設定しながら開始時期までに修正していきます。

「パターンを追加」をクリックするとパターン名を記載する画面が表示されます。
パターンはABテストの対象を意味します。バナーテストなどのようにテスト内容がわかる名前をおすすめします。
また、パターン名はいつでも変更できます。

パターン名を登録すると、オリジナルサイトとパターン(この記事ではテスト_パターン)が表示されているのがわかります。
ABテストのページを作るときは、右側にある「編集」ボタンをクリックします。

今回は先にGoogleオプティマイズとアナリティクスとのリンク、オプティマイズのスニペットをサイトに埋め込む作業を先に行います。

複数のテスト用ページを作る際の注意点

上の画像にある「ターゲティングとパターン」ですが、これはABテストで使用するページごとに作成する必要があります。
つまり、上の設定では https://www.issun.com のページのみが対象となります。
ABテストで複数のページの要素を変更する場合は、オーディエンスターゲティングの下にある「ページを追加」をクリックして、新たなパターンとページターゲティングを設定する必要があります。
※ページは10ページまで作成できます。

オプティマイズをインストールする

オーディエンスターゲティングの下方に「Googleアナリティクスとオプティマイズをリンクしてください」とあります。
ABテストでの集計をアナリティクスで計測するためにリンクさせます。
「アナリティクスにリンク」をクリックします。

「エクスペリエンスをアナリティクスにリンクする」画面が表示されます。
プロパティから該当するサイト名を選択し、Googleアナリティクスビューに「すべてのウェブサイト」を選んでから完了ボタンをクリックします。

アナリティクスとのリンクが成功すると上の画像のようにプロパティにサイト名、テストIDが表示されます。
※事前にアナリティクスが導入されている必要があります。

つぎに設定の項目でオプティマイズをサイトにインストールします。
オプティマイズのインストールの欄にある「手順を表示」をクリックします。

設定の手順の画面では、オプティマイズのスニペットが表示されます。
スニペットをサイトの各ページに埋め込むことでインストールできます。
ABテストの対象となるページの<head>タグ内に埋め込みます。
自社でサイトのhtmlファイルを管理している場合は、filezillaなどFTPクライントソフトを使用してスニペットを埋め込みます。
制作会社さんなどに管理を委託している場合は、スニペットを渡して埋め込みを依頼すればOKです。

正常にスニペットの埋め込みが確認されると上のように、「オプティマイズのインストール」のところにチェックが入ります。
※埋め込みが完了したら、「インストールを確認」をクリックします。

ABテストの目標を設定する

Googleアナリティクスとリンクし、オプティマイズのインストールも完了しました。
※Googleアナリティクスとリンクできていないと目標の設定はできません。
次にABテストの目標を設定します。
ここでいう目標は、このテストでメインに測りたい指標をいいます。

Googleアナリティクスの項目のすぐ下に「テスト目標を追加」とあるので、逆三角形をクリックします。
・リストから選択
・カスタム目標を作成
これら2つの選択肢が表示されます。

今回は合計購入数に焦点を当てたいので、リストからトランザクション数を選択します。
なお、リストにピックアップされる項目はGoogleアナリティクスに目標として設定された項目のほか、つぎのようなものがあります。
・セッション数
・トランザクション数
・ページビュー数
・収益
・直帰数

ページターゲティングを設定する

ABテストを実施するページを指定するために、ページターゲティングを設定します。
「+ URL のルールを追加」をクリックします。

ページをどのように指定するか選択します。
デフォルトでは「URL」となっています。
その他、ホスト、パス、URL フラグメントから選択できますが、わかりやすさを優先してURLを選択します。

次に、指定するURLとの一致についての条件を選択します。
デフォルトでは「次と一致」となっています。
・次と一致
・一致しない
・次と等しい
・次を含む
・次で始まる
これらの中から意図するものに合う項目を選択します。

例えば、弊社のサイトにある全てのページでABテストを行う場合は次のように設定します。
※①~④は上の画像にある①~④を表しています。

①「URL」と②「次を含む」を選択
③値 : https://www.issun.com/
このように設定することで、https://www.issun.com/ から始める他のページURLも含めることができます。

個別のページを追加する場合は次のように設定します。
①「URL」と②「次と一致」を選択
③値 : https://www.issun.com/company_info/
この設定ではデフォルトで設定されている https://www.issun.com/ と 会社概要のページ https://www.issun.com/company_info/ のみが指定されています。

ページターゲティングの設定を確認する

正常に設定されていかは④の項目で確認できます。
ルールの対象になるか確認したいページのURLを④にコピペし、確認ボタンをクリックすることで結果が表示されます。
上の画像では、 https://www.issun.com/company_info/ がURLの文字列一致で指定されているので、それ以外のURLはルールが適用されないという表示がされています。

サイトを修正する ~ テキストの変更 ~

ここまでで、
✓ ターゲットの設定
✓ アナリティクスとのリンク、オプティマイズのインストール
✓ 目標の設定
が完了しました。

テスト開始までもう一歩です。
オプティマイズの機能を活用してABテスト用のページを作成します。


ターゲティングとパターンの項目でパターン名の右側にある「編集」をクリックします。

編集ボタンをクリックすると上のように、編集するサイトが表示されます。また、画面右側にメニューがあるのがわかります。
これから画面の要素を変更することになりますが、基本的には①画面上で変更したい要素を選択し、②画面右のメニューで操作するという流れになります。
実験として画面中央にある「TOTAL WEB MARKETING」と「小よく”巨”を制す」を入れ替えてみます。

上は画面中央の「TOTAL WEB MARKETING」を選択した画面になります。青い線で囲まれ、見出し2<h2>と表示されています。また、画面右のメニューには要素の情報が表示されています。

文字を変更していきます。
①メニューの「要素を編集」をクリックします。以下のように項目が表示されます。
 ・削除
 ・テキストを編集
 ・HTMLを編集
 ・HTMLを挿入
 ・JavaScriptを実行
②テキストを編集をクリックします。
下のような画像が表示されます。

カーソルが表示されるので、wordの要領で文字を書き換えていきます。
個々の作業は動画で見たほうがわかりやすいので動画を貼り付けました。
画面中央の「TOTAL WEB MARLETING」を「小よく”巨”を制す」を入れ替えています。

テキスト編集作業の動画 1分30秒

この動画では、1回目のテキスト変更を「テキストを編集」項目から、2回目のテキスト変更を「HTMLを編集」から行っています。

このようにして文字を入れ替えることができました。
繰り返しになりますが、編集作業の基本になるのは次の2点です。
①要素を指定すること(カーソルでクリックする)
②メニューが編集する項目を選択すること


テキストの変更以外に、色の変更、要素の移動もこの流れでできますのでお試しいただけたらと思います。

テストを開始する

全ての設定を完了したので、テストを開始します。
開始ボタンをクリックすることでテストが開始されます。


この記事を書いた人
高口亨太
高口亨太
元高知県四万十町役場のふるさと納税担当。この業界に魅力を感じ一念発起!高知からやってきました(地元は千葉です)。 まだまだ修行中の身。ISSUNに入社して日は浅いですが、クライアントの皆様に「わかりやすい」施策を提案していきます。
Scroll to Top