【contact form 7】GTMでThanksページのないサイトのコンバージョン測定

公開日: 2025.01.01

google tag mamager WordPress Web解析

先日、WordPressサイトを弊社 Lenz Technologies Inc. で実装させていただきました。

ミニマムペライチのサイトで、特にサンクスページも設けなかったのでコンバージョンをどうやって計測しようと思った結果データレイヤーを追加することで実装することにしました。

他にもやり方はあると思いますがあくまで参考にしていただければ幸いです。

この記事を書いた人

かみーゆ/フロントエンドエンジニア

資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。

データレイヤーってなんぞ？

データレイヤーとは、Google タグマネージャー（GTM）とウェブページ間で情報をやり取りするための配列（変数が複数くっついたもの）です。ページ上のさまざまなイベントやデータ（商品ID、購入金額、ユーザーの行動など）を記録し、GTMなどのタグ管理ツールが取得できるようにします。
データレイヤーは、JavaScriptオブジェクトとしてウェブページに埋め込まれ、GTMによって読み取られて分析やトラッキングのために使用されます。

とのこと。Google検索が最近勝手に概要作ってくれるので便利ですね。

データレイヤーの追加方法

Googleタグマネージャーを実装しているサイトであれば以下のコードでデータレイヤーを追加可能です。

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 //ここに追加したいデータレイヤー
});

例えば単にコンバージョンの数（この場合のコンバージョンはお問い合わせの数）を計測したいだけであれば、appliedというイベント（event）として追加するだけで十分です。

window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
  'event': 'applied'
});

Contact Form 7 送信後の処理にデータレイヤーを追加

WordPress おなじみのフォームにはプラグイン Contact Form 7 があります。個人的にも、使い勝手が良くカスタマイズも簡単なので重宝しています。

Contact Form 7 では以下コードでフォーム送信完了後、JSで諸々操作できます。以下コードはフォームを設置したページに実装します。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  //ここにコード
}, false );

通常、送信成功の後Thanksページに転送し、Thanksページ訪問数をカウントし、コンバージョン数を計測するのが定石です。

長年いろんなWebサイトを観測して、このやり方では数値の正確性にかけることがあります。
ユーザーがブラウザーバックでThanksページとお問い合わせをいったり来たりしてしまってデータが重複することがあります。

なので、送信成功後一度しか発火しない wpcf7mailsent イベントを使ってデータレイヤーをGoogle タグマネージャーに送ることで計測します。

document.addEventListener( 'wpcf7mailsent', function( event ) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'applied'
  });
}, false );

Google Tag マネージャーの設定

GTMで受け取ったイベントをGA4と紐づけます。まずはGTM側でトリガーに「送信完了」を作成します。

カスタムイベント
イベント名設定
一部のイベントを選び条件設定

タグを追加します。

Googleアナリティクス:イベント
GA4のIT追加（変数に設定しておいてもいいかも）
イベント命名名

おまけ・TypeScript × Vue.js で作ったSPAのフォームにも追加してみた

TypeScript × Vue.js で作成したSPAフォームにもDatalayerを追加してみたので、そのコードを紹介しておきます。

コード

<script setup lang="ts">
import axios from 'axios';
//データレイヤーの呼び出し
const { dataLayer }: any = window;
//データレイヤーを追加する関数
const gtmDataLayer = ()=>{
  dataLayer?.push({
    'event': 'applied'
  });
}
//送信閭里
const onSubmit = ()=>{
  axios({
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    data: params,
    url: "/"
  }).then(res => {
    // 送信完了した時に追加の処理をする
    gtmDataLayer()
    ...
  }).catch(err => {
    ...
  });
}
</script>
<template>
  <form>
    ...フォームパーツ諸々
   <button type="button" @click="onSubmit">Send</button>
  </form>
</template>