【Data Studioレポート テンプレート付き】ポートフォリオサイトをGA4・GTMで分析してみた結果
2026-10-13
※この記事は、実際に組んだ分析環境の手順と、コピーして使えるData Studioレポートのテンプレートを掲載しています。
なぜ分析したかというと、
- ・受注がない
- ・そもそもサイトに訪問があるのか不明
今どのような状態なのかを知る手段として、
Google Analytics 4（以下GA4）・Google Tag Manager（以下GTM）・Data Studioを使って、可視化することにしました。
本記事では、ポートフォリオに対しての目標値の設定や、それを測るための方法を記載します。
目次
KGIとKPIの設定
最終目標（KGI）を「受注獲得」に置き、そこに至るまでの行動を段階的な目標（KPI）として逆算しました。
| 段階 | 指標 |
|---|---|
| KPI① | サイト訪問数 |
| KPI② | 90%スクロール到達率 |
| KPI③ | 実績詳細ページへの遷移 |
| KPI④ | CTAボタンのクリック |
| KGI | 受注獲得 |
ゴールに至るまでの行動を追うことで、「どこで離脱しているか」を見つけることができます。
なお、最終目標である「受注」そのもの（フォームの送信完了）は、今回GA4では計測できませんでした。使用しているフォームが自サイトとは別ドメインのため、GTMのタグが届かないという構造上の理由です。
そのため今回は、受注の手前までの行動を追うものとなっています。
※GA4のタグの追加方法などは世に溢れていますので、こちらの記事では割愛します。
次から、KPI①～④を計測できるようにした具体的な手順を紹介します。
実装1：CTAクリックの計測設定
CTA（Call To Action / 行動喚起）、ユーザーにとってほしい行動を促すボタンなどのことをいいます。
私のサイトでいうお問い合わせボタンのことです。
■ CTAボタンにクラスを追加
計測対象のCTAボタンに、共通クラスjs-cta-btnを追加しました。
<a href="#" class="btn js-cta-btn">お問い合わせ</a>既存のデザイン用クラス（btn）は残したまま、計測専用のクラスを追加しました。デザイン変更時に間違って計測用クラスまで消してしまわないよう、役割を分け js- とつけています。
■ GTMでのトリガー・タグ設定
- GTMの組み込み変数で、Click Classes・Click Text・Click URL・Page Pathを有効化
- トリガーを新規作成：種類は「クリック」→「すべての要素」
- 発火条件は「一部のクリック」→「Click Classes」「含む」「js-cta-btn」
- タグを新規作成：Google アナリティクス「GA4 イベント」タグ
- イベント名はcta_click、パラメータにlink_text={{Click Text}}、page_path={{Page Path}}を設定し、上記トリガーを紐付け
■ プレビューでのテスト
公開前に、GTMのプレビューモードで実際にボタンをクリックし、意図したタグだけが発火するか確認しました。対象外のボタンをクリックしても反応しないことも合わせて確認しています。
実装2：スクロール到達率の計測設定
GA4には拡張計測機能により、ページの90%スクロール到達時に自動でscrollというイベントが発生する仕組みが標準で備わっています。
今回、90%まで届かなくても50%まで読んでいる層がいるかを知りたいと考え、独自に計測するイベントをGTMで追加しました。
注意点としては、GA4標準の90%到達イベントと名前の重複を防ぐため、50%用のイベント名はscroll_50など別名にすることです。
| イベント | 名称 |
|---|---|
| 90%到達（GA4標準・自動） | scroll（変更不可） |
| 50%到達（GTMで独自作成） | scroll_50 など |
実装3：カスタムディメンションの登録
CTAクリックのパラメータ（link_text、page_path）は、そのままではGA4のレポートやData Studio上で選択できません。
GA4管理画面の「カスタム定義」から、イベントスコープのカスタムディメンションとして登録する必要があります。
- GA4管理画面 → データの表示 → カスタム定義 → カスタムディメンションを作成
- 範囲：イベント
- イベントパラメータにlink_text、page_pathをそれぞれ指定して登録
実装4：流入元の計測（UTMパラメータ）
クラウドワークスのプロフィール欄に貼るリンクには、以下のUTMパラメータを付与しました。
?utm_source=crowdworks&utm_medium=referral&utm_campaign=profile_crowdworks実装5：Data Studioでのレポート化
GA4で数値の確認ができるようになりました。継続的に見返せるよう、Data Studioで3ページ構成のレポートを作成しました。
タブ①全体サマリー：
セッション数、表示回数、エンゲージメント率、スクロール到達率（90%・50%）、CTAクリック数のスコアカードと、日別推移の折れ線グラフ
タブ②流入元別：
セッションの参照元/メディアごとのテーブル。クラウドワークス経由だけを抽出したグラフも別途用意
タブ③ページ別パフォーマンス：
実績詳細ページごとの表示回数・平均エンゲージメント時間の一覧
平均エンゲージメント時間は、GA4の標準指標には見当たらなかったため、以下の数式で計算フィールドを追加しました。
結果：分析できるほどの数値がない
訪問があり、流入先も知ることができました。
しかし、多くの実績詳細ページの表示回数は1～3件程度で、平均エンゲージメント時間の数値も低いため、分析できるほどの数値ではありませんでした。
結果をふまえた次の行動
分析で答えは出なかったが、関心を持たれやすい実績を増やすことが必要だと考えました。
具体的には、
・クラウドソーシングでの受注に繋げるためのLP、バナーの自主制作
・専門性の高いコンテンツを制作すること
受注が安定してきた頃に、改めて再分析し、振り返る記事を書きたいと思っています。
レポートのテンプレートを公開します
今回作成したData Studioレポートは、コピーして自分のGA4に繋ぎ直せば、同じ構成をそのまま使えます。
コピー後、ご自身のGA4側でscroll_50・cta_clickイベントや、link_text・page_pathのカスタムディメンションが未設定の場合、該当のフィルタ・指標は正しく表示されない場合があります。この記事の実装手順を参考に、同様の設定する必要があります。