[issue-15] 分析ツール実装

[gou1839]

関連issue

#15

実装内容

テンプレで実装されていたGTM/index.tsxはreact-gtm-moduleを使用していたが、更新が止まっておりGTMが想定通りに動作しなかった。そのためGTM/index.tsxに直接Scriptを書くことにした。
(参考: alinemorelli/react-gtm#132)

GTMを用いることで、ほとんどのイベントを全てGTM上で管理・作成できる。作成できたものから黄色🟨で塗りつぶしている
https://docs.google.com/spreadsheets/d/1aIQUrQJnaSGfY9RUk6xLzJSMIxcqqStwix6L1RMK89E/edit?usp=sharing
いくつかの分析項目はデータ取得に半日ほどかかるため、進行中

テスト

• テスト用に、このリポジトリを自分のプライベートリポジトリにForkし、Vercelにデプロイした。
  headlesscms-boiler-plate-fork.vercel.app
• .envに環境変数 NEXT_PUBLIC_GTM_ID=GTM-xxxxxx を設定するとTag Assistantで動作することを確認
• https://tagassistant.google.com/ にURLを打ち込み、GTMのタグがGA4の測定IDと紐づいていることを確認、イベントの取得も確認
• GA4の画面で実際にアナリティクスが更新されていることを確認

不具合・相談事項

検索
おそらくフロントの検索キーワードの実装に不具合があり、検索しても結果がundefinedになる。これにより、検索イベントは検知できてるが検索キーワードの集計ができてない
広告
広告クリックは、広告をどのように配信するか検討する必要がある。Google広告を使用する場合、GA4と連携はしやすく、データの表示がすぐにできる

[shimizu-n7]

@gou1839
LGTM
既に問題なく動作している && こちら検討済みでしたら無視で大丈夫です
Nextjs14以降だとnext/third-partiesを使った実装が可能になっているみたいですね👀
document
zennの記事

[gou1839]

@shimizu-n7 next/third-parties使ってやってみてたんですが、なぜかTag Assistantにタグが見つかりませんって言われて動かなかったんですよね。。。