GatsbyからGTM&Google Analytics(GA4)にイベントデータを送信してみる

2022.07.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも、ベルリンオフィスの小西です。

UAからGA4になって色々大変なGoogle Analyticsですが、GTM(Google Tag Manager)を通じてGAタグを埋め込んでおけば、基本的にはJamstackなサイトでもうまくページビューなどを検知してくれます。

今回は自分で設定が必要な部分 = 「フォーム送信などのイベント発生データをGoogle Analyticsに送信する」 を行なってみたいと思います。

前提

  • Google Analytics(GA4)、GTMの基本設定は終わっている
  • Gatsbyのセットアップが完了している

GTM側の準備

トリガーの作成

重要なのは [Event name] で、アプリ側から送信するキー名と一致させる必要があるため [formSubmit] としておきます。トリガー条件は [All Custom Events] のままで大丈夫です。

gtm - trigger

タグの作成

  • [Tag Type] として [Google Analytics: GA4 Event] を使います。
  • [Event Name] はそのまま [formSubmit] に。
  • トリガーとして先ほど作成した [Event - formSubmit] を紐づけ。
  • [User Properties] は必須ではないですが、Google Analytics側でイベントの分類が楽になるので、必要な情報を入れておきましょう。スクショの例ではリファラーと発生したページパスを一緒に送るようにしています。

gtm - tag

上記の設定が済んだらGTMを公開します。

これでGTM, Google Analyticsの設定は完了です。

Gatsby側の設定

GTM Packageのインストール

% npm install gatsby-plugin-google-tagmanager

gatsby-config.js

require('dotenv').config();

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Cyberdyne Care Robotics GmbH",
    description: "",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: "GTM-XXXXXXX",
      },
    },
		//...(略)
  ],
};

Submitイベントの送信処理

トリガーとなるイベント送信処理を記述します。

「Submit」ボタンを押すとGTMにデータをPushする簡単な処理です。

src/page/ 配下に form.js ページを作成します。

src/pages/form.js

import * as React from "react"
import Layout from "../components/layout"
import Seo from "../components/seo"

const FormPage = () => {
  async function onSubmit(e) {
    e.preventDefault();
    if (typeof window !== 'undefined'){
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: "formSubmit" });
      console.log("Done: formSubmit")
    }
  }

  return (
    <Layout>
      <Seo title="Form" />
      <h1>Form Submit Test</h1>
      <form
        onSubmit={onSubmit}
        method="POST"
      >
        <input
          type="submit"
          name="submit"
          value="Submit"
          style={{padding: "1rem 2rem", fontSize: "1.2rem"}}
        />
      </form>
    </Layout>
  )
}

export default FormPage

window.dataLayer.push() がGTMにデータを送る部分です。Key-Value方式で送信するデータを定義でき、window.dataLayer.push()({ Key: Value }); のような形にします。

GTMを通じてGAにイベントを検知させたい場合、下記のKey-Valueフォーマットに従う必要があります。

  • Key: "event" //固定値です
  • Value: "{送信したいイベント名}" //自由に定義できます

イベント送信を試してみる

% gatsby build & % gatsby serveしてサイトを立ち上げ(デフォルトでは `gatsby develop` でGTMタグが配信されない点に注意)、 http://localhost:8000/form/ にアクセスします。

色気も何もないページですが、準備は完了しているはずです。

gatsby sample

上記のページで一度 [Submit] ボタンを押して、Google Analyticsのダッシュボードを開き、リアルタイム計測をチェックします。

数秒後、無事Google Analytics側でもイベントを検知できました。

google analytics

以上、GatsbyからGTM&Google Analyticsへのイベント送信方法でした。

GA4のダッシュボードについてもっと勉強しなければ。。。

参考