Joomla! 初心者ガイド

JoomlaにGoogleアナリティクスを
導入する方法

拡張機能不要・テンプレート直接編集で完結

Webサイトの改善には、アクセス解析が欠かせません。この記事では、拡張機能(エクステンション)を一切使わずに、Joomlaのテンプレートファイルを直接編集してGoogleアナリティクス(GA4)を導入する方法を解説します。コアのアップデートによる互換性リスクを最小化したい方に最適な方法です。

この記事でわかること

項目 内容
対象バージョン Joomla! 4.x / 5.x / 6.x
編集するファイル /templates/cassiopeia/index.php
拡張機能 不要(手動設置)
難易度 ★☆☆ 初心者でも対応可能

作業の全体像

作業は大きく5つのステップで完了します。所要時間は慣れていれば10分程度です。

JoomlaへのGoogleアナリティクス設定手順フロー図(5ステップ)

STEP 1:Googleアナリティクスのトラッキングコードをコピーする

まず、Googleアナリティクス(analytics.google.com)にログインし、以下の手順でトラッキングコードを取得します。

  1. 左下の「管理(歯車アイコン)」をクリック
  2. 「プロパティ」列の「データストリーム」を選択
  3. 対象のウェブサイトストリームをクリック
  4. 「タグの実装手順を表示する」をクリック
  5. 手動でインストールする」タブを選択
  6. 表示されたJavaScriptコードをすべてコピー
Googleアナリティクス4(GA4)手動インストール画面 - トラッキングコードのコピー方法

▲ 「手動でインストールする」タブに表示されるコードをすべてコピーします

コードはどこに貼り付けるの?

GA4の画面には「<head> 要素の直後に貼り付けます」と案内されています。Joomlaでは、この <head> タグが書かれているファイルを探して編集する必要があります。次のステップで詳しく説明します。

STEP 2:なぜ cassiopeia の index.php を編集するのか

ここで少し重要な仕組みを理解しておきましょう。

子テンプレート(cassiopeia_extended)に <head> がない理由

cassiopeia_extended は、Cassiopeiaをベースにした子テンプレート(カスタムテンプレート)です。子テンプレートは、親テンプレートのファイルを「継承」して動作します。

子テンプレートの index.php に <head> タグがないのは、親テンプレート(cassiopeia)の index.php が <head> を担当しているからです。子テンプレート側でオーバーライドしていない限り、親のファイルがそのまま使われます。

したがって、Googleアナリティクスのコードを設置するには、/templates/cassiopeia/index.php を編集する必要があります。

ファイル <head> の有無 編集すべきか
/templates/cassiopeia/index.php あり
(親テンプレート)
◎ ここに貼り付ける
/templates/cassiopeia_extended/index.php なし
(子テンプレート)
× 編集しても反映されない

コアアップデートへの対応について

/templates/cassiopeia/index.php はJoomlaのコアファイルです。Joomlaのアップデート時に上書きされる可能性があります。アップデート後はGoogleアナリティクスが動作しているか必ず確認し、上書きされていた場合は再度コードを貼り付けてください。アップデート前に編集内容をメモしておくと安心です。

STEP 3:Joomlaのテンプレートエディタで index.php を開く

Joomlaの管理画面からテンプレートファイルを編集します。

  1. Joomla管理画面にログイン
  2. 左サイドメニューの「システム」をクリック
  3. 「テンプレート」セクションの「サイトテンプレート」を選択
  4. Cassiopeia」の「詳細とファイル」をクリック
  5. 左側のファイル一覧から index.php を選択

STEP 4:<head> タグの直後にコードを貼り付ける

Ctrl + F(Macは Cmd + F)で <head> を検索します。行番号129付近に <head> タグが見つかります。

<head> タグの直後の行(130行目)に、STEP 1でコピーしたGoogleアナリティクスのコードを貼り付けます。

Joomlaテンプレートエディタ cassiopeia/index.phpの<head>直後へのGoogleアナリティクスコード挿入箇所

▲ <head> タグ(129行目)の直後にGoogleアナリティクスのコードを貼り付けます

貼り付け後のイメージ(index.php 129〜142行目付近)

129: <head>
130: <!-- Google tag (gtag.js) -->
131: <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
132: <script>
133:   window.dataLayer = window.dataLayer || [];
134:   function gtag(){dataLayer.push(arguments);}
135:   gtag('js', new Date());
136:
137:   gtag('config', 'G-XXXXXXXXXX');
138: </script>
139:     <jdoc:include type="metas" />
140:     <jdoc:include type="styles" />
141:     <jdoc:include type="scripts" />
142: </head>

編集前にバックアップを忘れずに

テンプレートファイルを直接編集する前に、必ず index.php の内容をローカルにコピー&保存しておきましょう。誤って保存してしまった場合でも、バックアップがあれば即座に復元できます。

STEP 5:保存して動作確認する

コードを貼り付けたら、エディタ上部の「保存して閉じる」ボタンをクリックします。その後、以下の手順で正しく動作しているかを確認します。

  1. Joomlaサイトのトップページにアクセスする(ブラウザのシークレットモード推奨)
  2. Googleアナリティクスの管理画面を開く
  3. 左メニューの「レポート」→「リアルタイム」を選択
  4. 「過去30分間のユーザー」に数字が表示されれば設定完了

データが表示されるまで数分かかる場合があります。すぐに反映されない場合は、少し時間をおいてから再確認してください。また、ブラウザの広告ブロック拡張機能がGoogleアナリティクスをブロックしている場合もあるため、シークレットモードでの確認を推奨します。

コアアップデート時の注意点まとめ

今回編集した /templates/cassiopeia/index.php はJoomlaのコアファイルです。アップデート時の上書きリスクを理解した上で運用しましょう。

タイミング 確認事項
マイナーアップデート後
(例:5.3 → 5.4)
リアルタイムレポートでアナリティクスの動作を確認。上書きされていたら再貼り付け。
メジャーアップデート後
(例:5.x → 6.x)
テンプレート構造が変わる可能性あり。<head> タグの位置を再確認してから貼り付け。

どうしても手動が難しい場合の代替手段

テンプレートの直接編集に不安がある場合は、Joomla Extension Directory(JED)に登録されている拡張機能を利用する方法もあります。

代替として利用できる拡張機能

JEDで「Google Analytics」と検索すると複数の拡張機能が見つかります。管理画面から測定IDを入力するだけで設定が完了するため、テンプレート編集が不要です。ただし、拡張機能の更新がJoomlaコアのアップデートに追いつかない場合があるため、定期的な互換性確認が必要です。

JEDでGoogleアナリティクス拡張機能を探す →

まとめ

この記事では、Joomla! 4.x / 5.x / 6.x 共通の手順として、/templates/cassiopeia/index.php を直接編集してGoogleアナリティクス(GA4)を導入する方法を解説しました。

  • 拡張機能不要でシンプルかつ軽量
  • <head> タグは親テンプレート(cassiopeia)の index.php にある
  • アップデート後は動作確認を習慣にする

ぜひこの方法でGoogleアナリティクスを導入し、サイト改善に役立ててください。