ボタンクリック+ページ到達の計測方法

ボタンをクリックして、ページに到達したユーザーを計測するには下記５つの設定が必要です。 

カスタムコンバージョンゴールを作成

カスタムコンバージョンを使用しますので、設定＞ゴール にて下記のようなゴールを設定してください。

ゴール名：CTAボタンクリック かつ 完了ページ到達

ゴールの種類：カスタムコンバージョンを計測 を選択

URL一致：https://www.assion.co.jp/lp/05/complete/

Attention!

最後のアクションのページのURLになります。

クッキーを設置するロジック（関数）

ユーザーのブラウザにクッキーを付与するにはJSコードを使用します。Pre-Campaign JS・Campaign JS・Post-Campaign JSにて使えるように、下記の関数のコードをPre-Campaign JSに入れてください。（Pre-Campaignに入れればすべてに適用されます） 

Attention!

domain=assion.co.jpのところはテストを走らせているドメインに書き替えてください。

function setCookie(cname, cvalue, exdays) {

  var d = new Date();

  d.setTime(d.getTime() + (exdays*24*60*60*1000));

  var expires = "expires="+ d.toUTCString();

  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=assion.co.jp";

} 

setCookie関数の使い方については下記になります：

setCookie(/*クッキー名*/, /*クッキーの値*/, /*クッキーの日数*/);


例えば：　setCookie('clickCtaButton', 1, 1); 

クッキーを読み込むロジック（関数）

クッキーを読み込むには下記のような関数が必要です。Pre-Campaign JS・Campaign JS・Post-Campaign JSにて使えるように、下記のコードをPre-Campaign JSに入れてください。（Pre-Campaignに入れればすべてに適用されます） 

function getCookie(cname) {

  var name = cname + "=";

  var decodedCookie = decodeURIComponent(document.cookie);

  var ca = decodedCookie.split(';');

  for(var i = 0; i <ca.length; i++) {

    var c = ca[i];

    while (c.charAt(0) == ' ') {

      c = c.substring(1);

    }

    if (c.indexOf(name) == 0) {

      return c.substring(name.length, c.length);

    }

  }

  return "";

}      

getCookie関数の使い方については下記になります：

getCookie(/*クッキー名*/);

例えば：getCookie('clickCtaButton'); 

Attention!

返り値はstringになります。

クリックイベントハンドラ（要素がクリックされたら、上記のクッキーを設置する関数を実行させる）

ユーザーがボタンをタップしたアクションを認識するには、イベントハンドラを使用します。ユーザーがタップしたアクションに対してクッキーを設置します。Control・各バリエーションの対象になったユーザーのクリックを全部とるには、下記のコードをPost-Campaign JSに入れてください。 

vwo_$('/* ボタンのCSSセレクター*/').click(function(){

  setCookie(/*クッキー名*/, /*クッキーの値*/, /*クッキーの日間*/);

}); 

例えば： 

vwo_$('a.cta').click(function(){  setCookie('clickCtaButton', 1, 1);}); 

計測したいページに到達した後、クッキーを確認するロジック

CTAボタンをクリックして、ゴールページに到達した時のみゴールを計測したいので、到達したページが計測したいページと同じかどうかのロジックも必要です。クッキーがある場合はゴール発火コードを実行します。

ゴールページにコードを実行するにはPre-Campaign JSに入れる必要があります。 

Attention!

下記のゴール番号 (299) は設定したカスタムコンバージョンゴール番号に書き替えてください。

if(document.URL === '/* ゴールページのURL */') {

 if(getCookie('設置したクッキー名')) {

    window._vis_opt_queue = window._vis_opt_queue || [];

    window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(299);});

  } 

} 

例えば： 

if(document.URL === 'https://www.assion.co.jp/lp/05/complete/') {

 if(getCookie('ctaButtonClick')) {

    window._vis_opt_queue = window._vis_opt_queue || [];

    window._vis_opt_queue.push(function() {_vis_opt_goal_conversion(299);});

  } 

} 

まとめ

コードを全てまとめると、下記のようになります：

※青字部分は、キャンペーンに応じて変更する必要があります。 

Pre-Campaign JS

Post-Campaign JS