スキルアップはこちら!!▶[click]

プラグインContact Form7でコンバージョンイベントを計測する方法|Googleタグマネージャ(GTM)

GoogleTagManager(グーグルタグマネージャー)
この記事は約3分で読めます。

Contact Form7はそのままでは
お問い合わせフォーム送信後の
イベント(コンバージョン)取得ができません・・・。

 

送信時にイベントが取得できるように設定をしてみます。

 

テーマのfunctions.phpに下記を追記。

add_action( 'wp_head', 'contactform7_gtm_hook' ); //contactform7_gtm_hook関数を<head>内で実行

function contactform7_gtm_hook() {
  $output = 
  "<script>
    document.addEventListener( 'wpcf7mailsent', function( event ) { //フォーム送信が完了した時
      if ( '234' == event.detail.contactFormId ) { //contactform7のidが一致した場合
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ //データレイヤー変数を返す
          'event':'contact-form7_send', //トリガー発生
          'contact-form7_value':'お問い合わせ' //contact-form7の値がお問い合わせ
        });
      }
    }, false );
  </script>";
  echo $output; //「output」定義された内容を出力
}

 

 

タグマネージャーの設定

変数

変数名:event
カスタム イベント

カスタム イベント
ウェブサイトで下記のコードが実行されると、この値は「eventNameXYZ」に設定されます。
dataLayer.push({‘event’: ‘eventNameXYZ’});

 

変数名:contact-form7_value
データレイヤーの変数

データレイヤーの変数名
読み取り先のデータレイヤーの変数名。ウェブサイトで下記のコードが実行されると、「var」という名前のデータレイヤーの変数値は「value」に設定されます。
dataLayer.push({‘var’: ‘value’});
注: データレイヤーの変数はセッション単位ではなくページ単位でのみ指定します。

 

タグ

カテゴリ:{{Page URL}}(お問い合わせページのURL)

アクション:お問い合わせ完了(お問い合わせ完了時に表示させるアクション名)

ラベル:{{contact-form7_value}}(データレイヤーの変数)

 

 

トリガー

カスタムイベント
contact-form7_send

 

設定完了したらタグマネージャーを公開。

 

 

コンバージョンに
「お問い合わせ完了」を追加

 

送信完了した時のアクションがタグマネージャーのアクションと一致するはずですので、アクション名:等しい、アクション名は先ほどタグマネージャーで設定したアクション名称を設定。

 

 

テストで問い合わせ

 

アクションが取れました!

これで「お問い合わせ完了」についての
分析ができるようになりました。

 

設定が慣れるまで難しいような気がしますが・・・
覚えると色々と応用ができそうです★
\(^o^)/

タイトルとURLをコピーしました