エグウェブ.JP@福岡/WEBセミナー・分析・WEBサイト制作

福岡でWEB分析・ホームページ・WEBサイト作成・WordPress、Googleアナリティクス、LINEスタンプ、Photshop・illustrator、Excelの講座やセミナーを開催

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

time 2018/04/18

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^)/

download

プロフィール

EGUWEB

EGUWEB

【皆さまの人生に最良のファーストステップを】WEBサイトを作りたい!WEB分析を学びたいけど分からない。とりあえず色々と知りたい!皆様の悩みを解決できるように頑張ります。 [詳細]

カテゴリー