MEGUMI SHIMABUKURO

アクセス数やユーザー数、イベントの計測、サイトのパフォーマンスを測るために GA を使ったことはあるが、導入方法や計測するために必要な設定、GAでできることが何か、いまいちよくわかってないことが多かったので、キャッチアップしはじめた。

1. サイトにGAのトラッキングコードを埋め込む方法
2. GTMを経由してGAを使う方法（GTM のコンテナスニペットをサイトに埋め込む）
   1. GTMを経由する方法が一般的

• Google タグマネージャーの略
• タグの管理を行う
  • GTMが管理してくれるタグとは、scriptタグのこと
• サイトのパフォーマンスをプログラムを使って測定したい場合、script タグで javascript を動かす設定が必要で、動かしたいプログラムが増えるにつれて、scriptタグも増える
• html のコード上で scriptタグが増えると管理が面倒なので登場したがのGTM
• html のコードでは、GTMを使えるようにするコンテナスニペットを登録するだけ。タグを追加したい場合は、GTMのコンソール上から設定できる

• タグ
  • script タグのこと
• トリガー
  • GTMにタグを動作させるタイミングを検知させる設定のこと
• 変数
  • タグの処理で使う変数。組み込みの変数と独自に定義できる変数がある

タグは、 <script> タグで動かすjavascriptのことで、トリガーは、GTMにタグを動作させるタイミングを検知させる設定のこと。 トリガーで検知→タグのプログラムが動く 流れ。変数は、タグで動く処理で可変する値を渡したい場合などに使う。

1. GAのアカウントを作成する
2. GAのプロパティとデータストリームを作成する
3. GTMのアカウントを作成する
4. GAの設定をGTMのコンテナに追加する
5. GTMのコンテナスニペットをサイトのコードに埋め込む
6. カスタムイベントを追加する

通常、一つの組織につき、一つのアカウントが一般的

Redirecting...

https://analytics.google.com

左下の歯車から管理画面に移動して左上の作成ボタンのプロパティをクリック。流れに従って進める

📌  プロパティとは

データを分析する単位、１つサイトの粒度。計測したデータを受け取る側

📌  データストリームとは

プロパティに対してデータを送信する側。webサイトのURLなどを指定する

すでにアカウントがあったのでコンテナを追加した。アカウントは、1組織につき1アカウント。コンテナは、計測するwebサイト単位に作る。

アカウントを作成する場合は以下のリンクから。

Google Analytics

Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.

https://tagmanager.google.com

新しいタグを作る

GTMに追加する他のタグより早く発火させたいイベントは、Initialization - All Pages トリガーを設置する

Next.jsでサイトを作るので以下を参考にする

Optimizing: Third Party Libraries | Next.js

Optimize the performance of third-party libraries in your application with the `@next/third-parties` package.

https://nextjs.org

ライブラリを導入

$ pnpm add @next/third-parties

型で怒られたりした

RFC: `next/third-parties` · vercel next.js · Discussion #48256

Goal Improve the user and developer experience of loading popular third-party libraries in a Next.js application. Background 95% of Next.js websites load at least one third-party resource. The next…

https://github.com

調べてたらこれは最善の策じゃないっぽい

RFC: Google Tag Manager and gtag in `next/third-parties` · vercel next.js · Discussion #53868

Goal Improve the performance and developer experience of loading Google tag (gtag.js) and Google Tag Manager in a Next.js application. Background We recently launched next/third-parties (still expe…

https://github.com

RFCのサンプルを参考にして以下のコンポーネントを作って app/layouts から呼び出すようにした

// apps/frontend/app/components/google-tag-manager.tsx

"use client";

// @ts-ignore
import { useGoogleTagManager } from "@next/third-parties/google";
import { useEffect } from "react";

// ref https://github.com/vercel/next.js/discussions/53868
export const GoogleTagManager = () => {
    const { init } = useGoogleTagManager();
    const gtmParams = {
        id: process.env.GOOGLE_TAG_MANAGER_ID ?? "",
    };

    useEffect(() => init(gtmParams), []);

    return null;
}

しかし、 useGoogleTagManager がまだ利用できなそうだったので、 <GoogleTagManager gtmId={process.env. GOOGLE_TAG_MANAGER_ID } /> コンポーネントを利用した。型怒られは @ts-ignore で回避

📌 参考

Next.js で GTM + GA4を利用する

https://zenn.dev

サイト内の画像をクリックしたときのカスタムイベントを取得できるようにしてみる。２つのパターンを試してみる。

• クリックをトリガーにして、インベントを発生（タグを登録）させる方法 （6-1）
• dataLayer 変数に push（書き込み）されたことをトリガーにして、データレイヤー変数を使って、動的にインベント名を変更させながらイベントを発生（タグを登録）させる方法（6-2）

6-1. クリックをトリガーにして、インベントを発生（タグを登録）させる方法

変数

組み込みの変数を有効にする

トリガー

トリガーを設定する

Click ID は a タグに付与された id のこと。以下のようなコンポーネントがあったときに、idがmeshi になってるものがクリックされたときに発火する。

<Link id="meshi" target='_blank' href={meshi.siteUrl} key={meshi.id}>
   <Image className="h-auto max-w-full rounded-lg"
     width={300}
     height={300}
     src={meshi.imageUrl}
     alt=""
   />
</Link>

タグ

タグを設定する

• イベント名
• パラメーター
• トリガー

6-2. dataLayer 変数に push（書き込み）されたことをトリガーにして、データレイヤー変数を使って、動的にインベント名を変更させながらイベントを発生（タグを登録）させる方法

作ったタグがちゃんと動いてるかプレビューで確認する。タグの一覧にあるプレビューボタンをクリックすると、tag assistant が起動する。

tag assistant の初回起動は、対象のサイトのURLを入力して connect する。connect したら別windowが立ち上がる

タグが動作したかどうかは以下のように確認できる

GA4-CLICK-MESHI のタグを動かす操作したら発火したことが確認できた

イベントの詳細も確認できる

プレビューで挙動がOKだったら公開する

• 自動収集イベント
  [GA4] 自動収集イベント - アナリティクス ヘルプ

  自動収集イベントは、アプリまたはサイトのいずれか（下表のイベント名の下に示されているとおり）で基本的な操作を行うとトリガーされます。Google タグまたは Firebase 向け Google アナリティクス SDK を使用している場合は、これらのイベントを収集するコードを追加で記述する必要はありません。 特に明記されていない限り、アナリティクスは Android と iOS のアプリについて

  

  https://support.google.com
• 拡張計測イベント
  [GA4] 拡張計測機能イベント - アナリティクス ヘルプ

  拡張計測機能イベントを有効または無効にする方法と、各イベントで収集されるパラメータについて確認します。拡張計測機能では、コンテンツに対するインタラクションを測定できます。この機能を使用するには、Google アナリティクス管理画面でオプション（イベント）を有効にします。コードを変更する必要はありません。これらのオプションをウェブデータ ストリームで有効にすると、すぐに Google アナリティクス

  

  https://support.google.com

  
• 推奨イベント
  [GA4] 推奨イベント - アナリティクス ヘルプ

  これらのイベントをウェブサイトまたはモバイルアプリに追加すると、より有益なレポートの生成に加え、新たな機能と動作の測定を行うことができます。これらのイベントが意味を成すようにするには追加のコンテキストが必要なため、イベントが自動的に送信されることはありません。 この記事内のリンクを使用して、各イベントの既定のパラメータをご確認ください。推奨イベントと既定のパラメータを一緒に送信すると、レポートで

  

  https://support.google.com

  
• カスタムイベント
  [GA4] カスタム イベント - アナリティクス ヘルプ

  Google アナリティクスで自動的に収集されない追加情報を収集するときには、自動収集されるイベントや推奨イベントに該当しないユーザー アクションをレポートで分析したい場合もあります。そうした場合には、カスタム イベントを実装するとよいかもしれません。 カスタム イベントは、広告主様がご自身で定義できるイベントです。カスタム イベントを使えば、広告主様のウェブサイトやアプリで発生するビジネス固有

  

  https://support.google.com

• GTM
• GA4の管理画面

以下の記事が参考になった

すでにgithubのsrc/server-constants.tsでGoogle AnalyticsのトラッキングID設定も定義されているようです。
ちなみに、同じファイル内で、1ページに表示する記事の数や、タイトルなどもsrc/server-constants.ts内で設定できるようになっているんですね。至れりつくせりです。

astro-notion-blogでGoogle Analyticsを設定する方法

最近notionでブログをはじめてみました。 どうも。須那です。 最近notionでブログをはじめてみました。 始め方はこちらのREADMEがとても親切に解説してありますので是非参考にしてください！ この記事ではastro-notion-blogにGoogle Analytics(GA4)を導入するやり方を書いて

https://protoout.studio

 export const NOTION_API_SECRET =
   import.meta.env.NOTION_API_SECRET || process.env.NOTION_API_SECRET || ''
 export const DATABASE_ID =
   import.meta.env.DATABASE_ID || process.env.DATABASE_ID || ''
 
 export const CUSTOM_DOMAIN =
   import.meta.env.CUSTOM_DOMAIN || process.env.CUSTOM_DOMAIN || '' // <- Set your costom domain if you have. e.g. alpacat.com
 export const BASE_PATH =
   import.meta.env.BASE_PATH || process.env.BASE_PATH || '' // <- Set sub directory path if you want. e.g. /docs/
 
 export const PUBLIC_GA_TRACKING_ID = import.meta.env.PUBLIC_GA_TRACKING_ID
 export const NUMBER_OF_POSTS_PER_PAGE = 10
 export const REQUEST_TIMEOUT_MS = parseInt(
   import.meta.env.REQUEST_TIMEOUT_MS || '10000',
   10
 )
 export const ENABLE_LIGHTBOX = import.meta.env.ENABLE_LIGHTBOX

astro-notion-blog/src/server-constants.ts at a6c358e269a9c4b14cb34308fb6c1f5d8b4de367 · otoyo/astro-notion-blog

🚀 Begin building your very own Notion Blog with Astro. - otoyo/astro-notion-blog

https://github.com