TimerexとGoogle 広告・Meta広告を連携してコンバージョンを計測するための設定方法

Timerexの日程調整完了を広告のコンバージョンとして計測するための設定方法

以前の記事でBtoBマーケティングにおけるTimerexの活用について書かせていただきました。

🔗TimerexでBtoBマーケティングのアポ調整がとても楽になった話

今回は、その中でも触れさせていただいた、広告におけるコンバージョン地点として、計測をする際の設定方法を良く利用されるGoogle 広告・Meta広告にフォーカスして書いていきます。

Timerexでの日程調整完了を広告のコンバージョンにするメリット

例えば、Google 広告やMeta広告で顧客を集める際のコンバージョンポイントを無料相談会への申し込みやアポイントの設定としていた場合、

動線①：LP→フォームに情報入力→サンクスページ→自動返信メール（ここで日程調整）

よりも

動線②：LP→Timerexでフォームに情報入力と同時に日程調整

とTimerexを活用した動線の方がユーザーの工数が少なく、コンバージョンまでの離脱率が下がりやすいと考えられます。Timerexでは入力フォームにおいても詳細な設定ができるので、アポイントに必要な情報も漏らさず日程調整が可能です。

この日程調整完了をコンバージョンとして、広告媒体側に送信することで、より広告配信を最適化することができます。今回は、よく利用される広告媒体である「Google 広告」と「Meta広告」で計測を行う場合を書いていきます。

※尚、広告計測の連携に関してはプレミアムプランでのみ利用可能となっております。

Timerexでの広告計測設定 -Timerexドメインで計測を行う場合-

こちらは、Timerexドメイン上にあるカレンダーでの日程調整完了をコンバージョンとして計測する場合です。

基本的には公式ヘルプにも記載がある手順で連携していけばOKです。

🔗広告コンバージョンタグ設置（Google広告 / Facebook広告）

Google 広告の場合

①Timerexカレンダー設定の下部にある「サービス連携」から「＋サービス連携を追加する」をクリック

②ツールから「Google 広告」をクリックし、任意の連携の名前・コンバージョンID・コンバージョンラベルを入力

コンバージョンIDとコンバージョンラベルはGoogle 広告にて「コンバージョン」を作成した後に以下の画像のように確認が可能です。

③設定完了後にテストとして日程調整を完了させてみて、ステータスが「最近のコンバージョンはありません」に変わったらOK

※新規で作成したコンバージョンのみの確認方法です。

Meta広告の場合

①Timerexカレンダー設定の下部にある「サービス連携」から「＋サービス連携を追加する」をクリック

②ツールから「Facebook広告」をクリックし、任意の連携の名前・ピクセルID・任意のイベントコード名を入力

ここで入力したイベントコード名がピクセル上にイベントとして反映されます。

ピクセルIDはMetaの「イベントマネージャー」→「データソース」内の下記画像の赤枠のIDとなります。

③設定完了後にテストとして日程調整を完了させてみて、データソース内のイベントに「任意のイベントコード名」が表示されたらOK

Timerexでの広告計測設 -サイトに埋め込む場合-

続いて、自社サイトなどに埋め込みコードを使って、Timerexカレンダーを埋め込んだ場合の広告計測設定を書いていきます。

基本形の埋め込みコード

サイトへの埋め込みについては下記の公式ヘルプにて説明されています。

🔗日程調整カレンダーをサイトに埋め込む

基本の埋め込みコードは下記のものとなっており、こちらのコードをサイト内に埋め込むことで、任意のTimerexカレンダーを表示できます。

<!-- Begin TimeRex Widget -->
<div id="timerex_calendar" data-url="<https://timerex.net/s/【自社のTimerexのURLを入力】>"></div>

<script id="timerex_embed" src="<https://asset.timerex.net/js/embed.js>"></script>

<script type="text/javascript">
  TimerexCalendar();
</script>
<!-- End TimeRex Widget -->

Google 広告で計測したい場合の埋め込みコード

こちらもTimerexの開発ポータルにて説明されています。

🔗日程調整カレンダーウィジェット（サイトへの埋め込み機能）

そちらをもとにGoogle 広告計測用の埋め込みコードを作成してみました。

ちなみに筆者はコーダーではないので、不必要なコード部分などがあるかもしれませんので、ご留意いただけますと幸いです。

以下の埋め込みコードを貼り付けて【】を入力していただければ完成です。

【自社のTimerexのURLを入力】…表示させたいTimerexのURLを入力
【Google 広告のコンバージョンIDを入れる】…コンバージョンIDを入力
【Google 広告のコンバージョン ラベルを入れる】…コンバージョンラベルを入力

<!-- Begin TimeRex Widget --> 
<div id="timerex_calendar" data-url="<https://timerex.net/s/【自社のTimerexのURLを入力】>"></div>
<script id="timerex_embed" src="<https://timerex.net/js/embed.js>"></script>
<script async src="<https://www.googletagmanager.com/gtag/js?id=AW-【Google> 広告のコンバージョンIDを入れる】"></script>

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
</script>
<script id="timerex_embed" src="<https://asset.timerex.net/js/embed.js>"></script>
<script type="text/javascript">
    TimerexCalendar({
      'onLoad': function () {
        console.log('Widget Loaded');
      },
      'onFormOpen': function () {
        console.log('Booking form opened');
      },  
      'onBookingComplete': function () {
        console.log('Booking completed');
        gtag('event', 'conversion', {
            'send_to': 'AW-【Google 広告のコンバージョンIDを入れる】/【Google 広告のコンバージョン ラベルを入れる】',
            'value': 1.0,
            'currency': 'JPY'
            });
      }, 
    });
</script>
<!-- End TimeRex Widget -->

Meta広告で計測したい場合の埋め込みコード（Metaピクセルも同時に埋め込むVer.）

同様にMeta広告計測用の埋め込みコードを作成してみました。

以下はMetaピクセルも同時に埋め込む場合の埋め込みコードです。埋め込みサイトにGTM等でMetaピクセルが既に埋め込んでいる場合は、次のMetaピクセル無しVer.をご確認ください。

以下の埋め込みコードを貼り付けて【】を入力していただければ完成です。

【自社のTimerexのURLを入力】…表示させたいTimerexのURLを入力
【MetaピクセルIDを入れる】…ピクセルIDを入力
【Meta広告の任意のカスタムイベント名を入れる】…ピクセル上に反映させたい任意のイベントコード名を入力

<!-- Begin TimeRex Widget --> 
<div id="timerex_calendar" data-url="<https://timerex.net/【自社のTimerexのURLを入力】>"></div>
<script id="timerex_embed" src="<https://timerex.net/js/embed.js>"></script>

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  '<https://connect.facebook.net/en_US/fbevents.js>');
  fbq('init', '【MetaピクセルIDを入れる】');
</script>
<!-- End Facebook Pixel Code -->

<script type="text/javascript">
    TimerexCalendar({
      'onLoad': function () {
        console.log('Widget Loaded');
      },
      'onFormOpen': function () {
        console.log('Booking form opened');
      },  
      'onBookingComplete': function () {
        console.log('Booking completed');
        fbq('trackCustom', '【Meta広告の任意のカスタムイベント名を入れる】');
      }, 
    });
</script>
<!-- End TimeRex Widget -->

Meta広告で計測したい場合の埋め込みコード（Metaピクセル無しVer.）

埋め込みサイトにGTM等でMetaピクセルが既に埋め込んでいる場合は、以下の埋め込みコードでOKです。

以下の埋め込みコードを貼り付けて【】を入力していただければ完成です。

【自社のTimerexのURLを入力】…表示させたいTimerexのURLを入力

【Meta広告の任意のカスタムイベント名を入れる】…ピクセル上に反映させたい任意のイベントコード名を入力

<!-- Begin TimeRex Widget --> 
<div id="timerex_calendar" data-url="<https://timerex.net/【自社のTimerexのURLを入力】>"></div>
<script id="timerex_embed" src="<https://timerex.net/js/embed.js>"></script>

<script type="text/javascript">
    TimerexCalendar({
      'onLoad': function () {
        console.log('Widget Loaded');
      },
      'onFormOpen': function () {
        console.log('Booking form opened');
      },  
      'onBookingComplete': function () {
        console.log('Booking completed');
        fbq('trackCustom', '【Meta広告の任意のカスタムイベント名を入れる】');
      }, 
    });
</script>
<!-- End TimeRex Widget -->

Google 広告とMeta広告を両方計測したい場合の埋め込みコード（Metaピクセルも同時に埋め込むVer.）

一つの埋め込みコード（Timerexカレンダー）でGoogle 広告にもMeta広告にもコンバージョンデータを送りたい場合は以下の埋め込みコードとなります。

【自社のTimerexのURLを入力】…表示させたいTimerexのURLを入力
【Google 広告のコンバージョンIDを入れる】…コンバージョンIDを入力
【Google 広告のコンバージョン ラベルを入れる】…コンバージョンラベルを入力
【MetaピクセルIDを入れる】…ピクセルIDを入力
【Meta広告の任意のカスタムイベント名を入れる】…ピクセル上に反映させたい任意のイベントコード名を入力

<!-- Begin TimeRex Widget --> 
<div id="timerex_calendar" data-url="<https://timerex.net/s/【自社のTimerexのURLを入力】>"></div>
<script id="timerex_embed" src="<https://timerex.net/js/embed.js>"></script>
<script async src="<https://www.googletagmanager.com/gtag/js?id=AW-【Google> 広告のコンバージョンIDを入れる】"></script>

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  '<https://connect.facebook.net/en_US/fbevents.js>');
  fbq('init', '【MetaピクセルIDを入れる】');
</script>
<!-- End Facebook Pixel Code -->

<script type="text/javascript">
    TimerexCalendar({
      'onLoad': function () {
        console.log('Widget Loaded');
      },
      'onFormOpen': function () {
        console.log('Booking form opened');
      },  
      'onBookingComplete': function () {
        console.log('Booking completed');
        fbq('trackCustom', '【Meta広告の任意のカスタムイベント名を入れる】');
        gtag('event', 'conversion', {
            'send_to': 'AW-【Google 広告のコンバージョンIDを入れる】/【Google 広告のコンバージョン ラベルを入れる】',
            'value': 1.0,
            'currency': 'JPY'
            });
      }, 
    });
</script>
<!-- End TimeRex Widget -->

Google 広告とMeta広告を両方計測したい場合の埋め込みコード（Metaピクセル無しVer.）

最後です！一つの埋め込みコード（Timerexカレンダー）でGoogle 広告にもMeta広告にもコンバージョンデータを送りたくて、埋め込みサイトにGTM等でMetaピクセルが既に埋め込んでいる場合は以下の埋め込みコードとなります。

【自社のTimerexのURLを入力】…表示させたいTimerexのURLを入力
【Google 広告のコンバージョンIDを入れる】…コンバージョンIDを入力
【Google 広告のコンバージョン ラベルを入れる】…コンバージョンラベルを入力
【Meta広告の任意のカスタムイベント名を入れる】…ピクセル上に反映させたい任意のイベントコード名を入力

<!-- Begin TimeRex Widget --> 
<div id="timerex_calendar" data-url="<https://timerex.net/s/【自社のTimerexのURLを入力】>"></div>
<script id="timerex_embed" src="<https://timerex.net/js/embed.js>"></script>
<script async src="<https://www.googletagmanager.com/gtag/js?id=AW-【Google> 広告のコンバージョンIDを入れる】"></script>

<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
</script>
<script id="timerex_embed" src="<https://asset.timerex.net/js/embed.js>"></script>
<script type="text/javascript">
    TimerexCalendar({
      'onLoad': function () {
        console.log('Widget Loaded');
      },
      'onFormOpen': function () {
        console.log('Booking form opened');
      },  
      'onBookingComplete': function () {
        console.log('Booking completed');
        fbq('trackCustom', '【Meta広告の任意のカスタムイベント名を入れる】');
        gtag('event', 'conversion', {
            'send_to': 'AW-【Google 広告のコンバージョンIDを入れる】/【Google 広告のコンバージョン ラベルを入れる】',
            'value': 1.0,
            'currency': 'JPY'
            });
      }, 
    });
</script>
<!-- End TimeRex Widget -->

まとめ

ここまで読んでくださりありがとうございました。

Timerexから直接コンバージョンデータを送ることで、広告の最適化が進み、成果改善につながることを祈っております！

また、埋め込みコードに関してはテストコンバージョンなどで動作確認済みではありますが、もし不具合等あれば、教えていただけると幸いです。