Google Optimize上でclassを指定し色変更。イベントが発火しない時の解決方法

Google OptimizeでボタンカラーのABテストを実施。class名を変更し色指定を行ったが、イベントトラッキングが発火しない事象が発生。解決方法を記載

Google Optimizeを利用し、ボタンカラーのABテストを実施。

ボタンカラーの効果検証のイメージ図

色変更は、Google Optimizeのビジュアルエディタ上でHTMLに記述しているクラス名を変更し行いました。

…が、なぜかボタンに設定していた”イベントトラッキング”が発火しない事態に。

イベントトラッキングの設定例

ぼく
オリジナルは発火。テストパターンのみ発火せず。

結果、効果検証は失敗。

試行錯誤の末、Google Optimizeのコードエディタ上で色指定を行うことで本事象が解決しました。

解決方法

  • ✕:Google Optimizeのビジュアルエディタ上でHTMLに記述しているクラス名を変更し、色(css)を指定
  • ◯ :Google Optimizeのコードエディタ上で色(css)を指定

以下、詳細です。

Google Optimizeのビジュアルエディタ上でclassを指定し色変更。イベントが発火しない時の解決方法

ABテストの内容

CTAボタンカラーの効果検証。指標はクリック数、および、クリック率。

ボタンカラーの効果検証のイメージ図

ツールは「Google Optimize」を使用。

当初の設定内容

Google Optimizeのビジュアルエディタ上でHTMLに記述しているクラス名を変更し、色変えを行った。

Google Optimizeのビジュアルエディタ上でボタンカラーを変更

また、イベントトラッキングは、該当要素にonclickを直記述するのではなく、jsに記述した。

ぼく
別タブで開くボタンのため、class名をトリガーとして設定。jsでイベントを発火させる形に。

結果

テストパターンのイベントトラッキングが発火せず。

ABテストのテストパターンのイベントトラッキングが発火しないイメージ図

結果、”効果検証”は失敗しました。

ぼく
オリジナルしかカウントされてないので、(オリジナルの)有意水準が100%にww

解決方法

Google Optimizeのコードエディタ上でボタンカラーを変更。

Google Optimizeのコードエディタ上でボタンカラーを変更

こうすることで、オリジナル/テストパターンの双方でイベントトラッキングの発火がなされました。

まとめ

トリガーを設定している要素に対して、Google Optimizeのビジュアルエディタ上で変更を加えるのはNG。

そういった要素に対し、cssやjsにて変化を加える場合は、コードエディタ上にて調整する。

トリガーを設定している要素に対し、ボタンカラーを変更する場合

  • ✕:Google Optimizeのビジュアルエディタ上でHTMLに記述しているクラス名を変更し、色(css)を指定
  • ◯ :Google Optimizeのコードエディタ上で色(css)を指定

そんな感じで終わりッ!!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください