produced by Classmethod ˗ˏˋ テックとビジネスの祭典 ˎˊ˗ Classmethod ODYSSEY 本登録開始!

Google アナリティクスを使い始める

#Google Analytics

PoojaSunil Jadhav

2024.07.02

導入

Google Analyticsは非常に強力なツールであり、私が最近のプロジェクトの1つに導入する機会がありました。それが提供するインサイトとデータは、データに基づいた決定を行う上で非常に貴重でした。このブログでは、私の経験を共有し、Google Analyticsを始めるために私が取った手順をご紹介いたします。

Google Analyticsについて

Google Analyticsは、Googleが提供する強力なウェブ分析サービスで、ウェブサイトのトラフィックを追跡し報告します。ユーザーの行動、トラフィックソース、マーケティングキャンペーンの効果について詳細なインサイトを提供し、企業がユーザーとウェブサイトの相互作用を理解できるようにします。page views、bounce rates、session durationsなどの指標を分析することで、組織はオンラインプレゼンスの最適化、ユーザー体験の向上、データに基づいた決定を行い、デジタルマーケティング戦略を強化することが可能になります。これらの機能により、Google Analyticsは多くの企業にとって不可欠なツールとなっています。

はじめる！

Step 1: Google アナリティクスアカウントの作成

サインインして設定する。

Google Analyticsにサインイン：Google Analyticsへのサインイン：まず、Google Analytics websiteにアクセスし、Googleアカウントでサインインしました。Googleアカウントをお持ちでない場合は、新規作成が必要です。
アカウントを設定する: サインイン後、「Start measuring」ボタンをクリックして、新しいGoogle Analyticsアカウントを作成しました。
- アカウント名：プロジェクトを表す名前を入力しました。
- データ共有設定: Googleが私のデータをどのように使用できるかを制御するため、データ共有設定を確認し、希望する設定を選択しました。

プロパティを設定する: 次に、アカウント内にプロパティを作成しました。
- プロパティ名: ウェブサイトの名前を使用しました。
- 報告タイムゾーンと通貨: 正確なレポートのため、適切なタイムゾーンと通貨を選択しました。

データストリームを設定する: ウェブサイトに焦点を当てていたため、Webプラットフォームを選択しました。
- ウェブサイトのURL: ウェブサイトのURLを入力しました。
- ストリーム名: データストリームに適切な名前を付けました。
- その後、「Create Stream」をクリックして、固有のMeasurement IDを生成しました。

Step 2: Google アナリティクストラッキングコードを自分の Web サイトに追加します。

トラッキングコードの統合。

グローバルサイトタグをコピーします: データストリームを作成した後、Global Site Tag（gtag.js）が表示されました。これはウェブサイトに必要なトラッキングコードです。
- 「Global Site Tag（gtag.js）」をクリックして、コードをコピーしました。

トラッキングコードを Web サイトに追加します: Global Site Tagコードを、ウェブサイトの各ページの<head>セクションに貼り付けました。これは手動で行うか、Google Tag Managerのようなタグ管理システムを使用して行うことができます。

head
<-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_MEASUREMENT_ID"><script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
 gtag('config', 'YOUR_MEASUREMENT_ID');
<script>
<head>

フロントエンドコードに React コードを追加します: 以下のコードを追加するファイルを作成します。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
declare global {
interfaceWindow {
dataLayer:any[];
gtag: (...args:any[]) =&gt;void;
}
}
const GA_TRACKING_ID = process.env.REACT_APP_GA_TRACKING_ID;
export const GoogleAnalytics: React.FC = () =&gt; {
constlocation=useLocation();
useEffect(() =&gt; {
consthandleRouteChange= (url:string) =&gt; {
if (window.gtag) {
console.log(`Logging pageview for ${url}`);
window.gtag('config', GA_TRACKING_ID, {
page_path:url,
]});
} else {
console.error('gtag function is not defined');
};
// Load Google Analytics script
constscript=document.createElement('script');
script.src=`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`;
script.async=true;
document.head.appendChild(script);
script.onload= () =&gt; {
console.log('Google Analytics script loaded');
window.dataLayer=window.dataLayer|| [];
window.gtag=functiongtag() { window.dataLayer.push(arguments); };
window.gtag('js', newDate());
window.gtag('config', GA_TRACKING_ID);
// Track the initial page load
handleRouteChange(location.pathname);
};
script.onerror= () =&gt; {
console.error('Failed to load Google Analytics script');
};
// Track route changes
handleRouteChange(location.pathname);
return () =&gt; {
document.head.removeChild(script);
}, [location]);
return null;
};

Google Analytics トラッキング ID を設定します: 各環境ごとに .env ファイル (REACT_APP_GA_TRACKING_ID=G-XXXXXXXXXX)

Step 3: トラッキングコードの確認。

リアルタイムレポート。

リアルタイムレポート: Google アナリティクスダッシュボードに戻り、「リアルタイム」レポートに移動しました。このレポートには、現在 Web サイトにアクセスしているユーザーのライブデータが表示されます。

ウェブサイトにアクセス: 新しいタブを開いて自分のウェブサイトにアクセスしました。リアルタイムレポートにアクティビティが反映されているのを見て、トラッキングコードが正しく設定されていることが確認できました。

Step 4: Google アナリティクスレポートの調査。

データの分析。

Google アナリティクスでは、ウェブサイトのパフォーマンスを理解するのに役立つさまざまなレポートが提供されています。

観客レポート:人口統計、興味、行動など、訪問者が誰であるかについての洞察を提供しました。
買収レポート: 訪問者が検索エンジン、ソーシャルメディア、その他のソースを通じてどのように Web サイトを見つけたかを示します。
行動レポート: ページビュー、直帰率、サイトコンテンツなど、ウェブサイトでの訪問者の行動を分析しました。

注: 詳細については、以下のリンクを参照してください。 https://developers.google.com/analytics

結論

これらの手順に従うことで、Google アナリティクスを設定し、ウェブサイトのパフォーマンスに関する貴重なデータを収集できるようになりました。Google アナリティクスレポートを定期的に確認することで、オンラインでのプレゼンスを向上させ、プロジェクト目標を達成するための情報に基づいた決定を下すのに役立ちました。Google アナリティクスをプロジェクトに統合して、その強力な分析機能を活用することを強くお勧めします。分析をお楽しみください!

Google アナリティクスを使い始める

導入

Google Analyticsについて