この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
どうも、ベルリンオフィスの小西です。
UAからGA4になって色々大変なGoogle Analyticsですが、GTM(Google Tag Manager)を通じてGAタグを埋め込んでおけば、基本的にはJamstackなサイトでもうまくページビューなどを検知してくれます。
今回は自分で設定が必要な部分 = 「フォーム送信などのイベント発生データをGoogle Analyticsに送信する」 を行なってみたいと思います。
前提
- Google Analytics(GA4)、GTMの基本設定は終わっている
- Gatsbyのセットアップが完了している
- セットアップ記事は→ 1. Gatsby立ち上げ
GTM側の準備
トリガーの作成
重要なのは [Event name] で、アプリ側から送信するキー名と一致させる必要があるため [formSubmit] としておきます。トリガー条件は [All Custom Events] のままで大丈夫です。
タグの作成
- [Tag Type] として [Google Analytics: GA4 Event] を使います。
- [Event Name] はそのまま [formSubmit] に。
- トリガーとして先ほど作成した [Event - formSubmit] を紐づけ。
- [User Properties] は必須ではないですが、Google Analytics側でイベントの分類が楽になるので、必要な情報を入れておきましょう。スクショの例ではリファラーと発生したページパスを一緒に送るようにしています。
上記の設定が済んだら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/
にアクセスします。
色気も何もないページですが、準備は完了しているはずです。
上記のページで一度 [Submit] ボタンを押して、Google Analyticsのダッシュボードを開き、リアルタイム計測をチェックします。
数秒後、無事Google Analytics側でもイベントを検知できました。
以上、GatsbyからGTM&Google Analyticsへのイベント送信方法でした。
GA4のダッシュボードについてもっと勉強しなければ。。。
参考