AB テストを使ってカスタムゴールを活用してみよう！ ｜ SiTest (サイテスト) ブログ

AB テストを使用していると、テストパターンで追加したリンクやボタンの
クリック数を計測したいという場面があります。

今回は、カスタムゴール機能を活用して、
AB テストで追加した要素のクリック数を計測する方法をご紹介します！

カスタムゴールとは、 SiTest で提供しているゴール機能のひとつです。
作成すると「カスタムゴールコード」という JavaScript のコードが発行されます。

こちらのカスタムゴールコードを、
リンク要素などの onclick 属性に記述していただくことで、
その要素がクリックされるとカスタムゴールコードが発火され、
コンバージョン計測が行われます。

カスタムゴールコードは JavaScript のコードのため、
onclick 属性に記述する以外にも、
独自の JavaScript ファイルの中でカスタムゴールコードを実行することで
思い通りの場所でコンバージョン計測を行うことが出来ます。

SiTest 管理画面からのカスタムゴールコード発行方法に関しては、
こちらのヘルプをご参照下さい！

カスタムゴールコードの発行

まずは、カスタムゴールコードを発行しましょう。

SiTest 管理画面のプロジェクト一覧から「ゴール一覧」をクリックし、
「カスタムゴールコードの発行」ボタンをクリックします。

カスタムゴールコード発行のダイアログが表示されますので、
ゴール名を入力し「コードを発行」ボタンをクリックすると
JavaScript のカスタムゴールコードが発行されます。

こちらの JavaScript コードは控えておきましょう。
後ほど、 AB テストで設定する際に必要となります。

AB テストを作成する

今回は、 SiTest トップページのトライアル申し込みボタンを入れ替えるテストを行います。
また、そのボタンにカスタムゴールコードを設定していきます。

まずはスプリットテスト一覧から AB テストを作成しましょう。

テストパターンは2つ作成し、

• テストパターン1は「ボタンにカスタムゴールコードを設定」
• テストパターン2は「ボタンを入れ替えカスタムゴールコードを設定」

という内容で設定を進めていきます。

テストパターン1では属性編集を使用し、
onclick 属性と先ほど発行したカスタムゴールコードを設定します。

これでテストパターン1の設定は完了しました。
次にテストパターン2の設定に移ります。

テストパターン2ではまず申し込みボタンを変更し、カスタムゴールコードを設定します。
それぞれスタイル編集や属性編集を使用しても良いのですが、
今回は HTML 編集を使用して一度の変更で両方を実現していきます。

HTML 編集を使用する場合には注意が必要です。
この機能は HTML そのものを入れ替えるという動きをしてしまうため、
JavaScript で制御されたコンテンツを修正する場合には、
HTML 編集以外の方法でテストパターンを作成しましょう。

これでテストパターン2の作成も完了しました。
最後に、「テスト設定」から訪問者の割り当てを変更します。

オリジナルパターンは0%に設定し、
テストパターン1・2にそれぞれ50％ずつ割り当てます。

これでカスタムゴールコードを設定した AB テストの作成が完了しました！

今回は、AB テストで要素を追加し、
そのクリック数を計測したい場合の設定方法をご紹介しました。

カスタムゴール機能は一見難しい機能に見えますが、
AB テストと組み合わせることでとても簡単にコンバージョン計測が行えるなど、
汎用性の高い機能となっています。

AB テスト機能は多くのお客様にお使いいただいておりますが、
機能の組み合わせなどまだまだ便利に使える方法がたくさんあります。
今後もこのような活用方法をご紹介していきますので、お楽しみにお待ちください！