Snow Monkey FormsでGoogle Analyticsのコンバージョンを設定する方法

Google Analyticsでは「問い合わせフォームから問い合わせをした」といった行動を、ゴールなどに設定してアクセス解析をする事ができます。

ただし、Snow Monkey Formsでフォームを構築している場合、問い合わせの確認画面や完了画面が同じアドレスで展開されるため、「問い合わせを送信した」というタイミングをアドレスで確認することができません。こんな時は、カスタムDOMイベントを利用しましょう。

カスタムDOMイベントとは

Snow Monkey Formsでは、「カスタムDOMイベント」を発信しています。

これを使うと、フォームを送信したタイミングを知ることができるため、これをJavaScriptで捕まえて、Google Analyticsに直接送信します。テーマの「functions.php」か、Snow Monkeyをテーマに使っている場合は「My Snow Monkey」プラグインに次のように記述しましょう。

<?php
add_filter( 'snow_monkey_template_part_render_footer', function( $html, $name, $vars ) {
  if ( is_page( 'contact') ) {
    $html .= "<script>
const form = document.querySelector( '.snow-monkey-form' )
form.addEventListener( 'smf.complete', ( event ) => gtag('event', 'form_submit', {
  'event_category': 'form',
  'event_label': 'submit',
}))
</script>";
  }
  return $html;
}, 10, 3 );

フッターに<script>タグを出力します。このタグは、「contact」というアドレスの場合のみ利用されます。アドレスが違う場合は、2行目の以下の場所を書き換えます。

if ( is_page( 'contact' ) ) {

Google Analyticsへの送信は次の場所で行っています。

gtag('event', 'form_submit', {
  'event_category': 'form',
  'event_label': 'submit',
}

すると、図のように「イベント」というエリアに記録されます。

これをコンバージョンなどに設定することで、ウェブサイトの解析が行えるようになります。設定のお手伝いなどが必要な場合は、H2O spaceまでお問い合わせください。