Contact Form 7の送信トリガーをGoogle Tag Managerで受け取る方法

2021年4月21日

WordPressでカスタムイベントをGoogle Tag Managerのカスタムイベントに送信する

手順1. functions.phpに以下のコードを追加する


///////////////////////////////////////
// コンタクトフォーム送信時にGoogle Tag Manager にカスタムイベントを送信
///////////////////////////////////////

add_action( 'wp_footer', function () {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7invalid', function( event ) {
        dataLayer.push({'event':'wpcf7invalid'});
}, false );

document.addEventListener( 'wpcf7spam', function( event ) {
        dataLayer.push({'event':'wpcf7spam'});
}, false );

document.addEventListener( 'wpcf7invalid', function( event ) {
        dataLayer.push({'event':'wpcf7invalid'});
}, false );

document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({'event':'wpcf7mailsent'});
}, false );

document.addEventListener( 'wpcf7mailfailed', function( event ) {
        dataLayer.push({'event':'wpcf7mailfailed'});
}, false );

document.addEventListener( 'wpcf7submit', function( event ) {
        dataLayer.push({'event':'wpcf7submit'});
}, false );

</script>
<?php
});

手順2. Google Tag Managerのトリガーで「カスタムイベント」を選択し、以下の中から使いたいイベントを選んで記載する。
いわゆる「登録完了」はwpcf7mailsentなのでとりあえずこれを選んでおけばOK。
wpcf7submitは必須項目のチェックなどが成功してもしなくても、送信ボタンが押されたら常に発火するので、一般的な登録完了とは定義が異なるのでおすすめしない。

wpcf7invalid — Ajax のフォーム送信が完了したが、正しくない入力があったためにメール送信は行われなかった場合に発生する。

wpcf7spam — Ajax のフォーム送信が完了したが、スパム行為の疑いがあったためにメール送信は行われなかった場合に発生する。

wpcf7mailsent — Ajax のフォーム送信が完了し、またメールの送信も行われた場合に発生する。

wpcf7mailfailed — Ajax のフォーム送信が完了したが、メールの送信には失敗した場合に発生する。

wpcf7submit — 他の条件に関係なく、Ajax のフォーム送信が完了した場合に発生する。

DOM イベント – Contact Form 7

なぜこのコードが必要なのか

Google Tag Managerで使える「カスタムイベントトリガー」は、Javascriptの「カスタムイベント」とは異なるため。
Google Tag Managerで使うためには、以下のコードをJavascriptで実行し、カスタムイベントを発火する必要がある。

dataLayer.push({'event': 'カスタムイベントトリガー名'});

Contact Form 7のイベントはJavascriptレベルのカスタムイベントなので、改めてGoogle Tag Managerにカスタムイベントを送信する必要がある。

詳しくはGoogleのヘルプページを参照してください。
カスタムイベントトリガー – Google