GA4・GTMを触ってみた

2024年3月16日 13:55

なぜ導入することにしたのか

DEになってから、GA4やGTMについての知識が必要なログ設計を作る機会ができたものの、触ったことが全くないことに気づき、自環境で触って検証できたらいいのにと思ったから。

GA4とは

Googleアナリティクス4の略。
サイトに訪問したユーザーの行動を分析できるツール。
無料で利用可能！
※ただし一部機能は制限あり

GTMとは

Googleタグマネージャーの略。
サイトに訪問したユーザーの行動データを収集するために必要なタグをまとめて管理できるツール。
特定のイベントによって動くトリガー・データをGA4などに送信するタグ・変動する値が入る変数・変数を一時的にまとめて置けるデータレイヤーによって構成されている。
無料で利用可能！
※ただし一部機能は制限あり

GitHubとは

プログラムコードを保存・公開できるソースコード管理サービス。
無料で利用可能！
※ただし一部機能は制限あり

導入手順

今回は、GitHubで作成した個人サイトにpage_viewログを実装する

1.Googleアカウント作成

以下のURLからGoogleアカウントを作成する
https://support.google.com/accounts/answer/27441?hl=ja

2.GitHubアカウント作成

・GitHubのSignUpをクリック

・メールアドレスを入力

・パスワードを入力

・ユーザーネームを入力

～ is available.と表示されると使用できるユーザーネームってことで登録可能！

・製品の最新情報を追いたい場合はチェックボックスにチェックを入れる

・ちょっと待つと、アカウントの保護のための質問が始まる

デフォルトだと視覚情報での検証になる。音声情報がいい場合は「音声情報」をクリック

・メールアドレスに確認用のコードが届くため、それを入力
・プランは無料と有料が選べる。

→アカウント登録完了！

3.GitHub上に個人ページを作成

・ログインするとホーム画面に到達できる（はず！）

・緑のボタンを押してレポジトリを作成する

・レポジトリの設定を入力
　-Repository name：レポジトリ名（必須）
　-他は任意でOK！

・レポジトリが作成出来たら、creating a new fileをクリック

・ファイル作成画面で、HTMLファイルを作成して、Commit changesボタンをクリック

　-必要であればこちらのHTMLコードを使ってください！

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GitHubテスト</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
  <header>
    GitHubテスト
  </header>
  <footer>
  </footer>
</body>
</html>

・ダイアログが表示されるのでCommit changesボタンをクリック