こちらの記事では、「STUDIOで制作したサイトとGoogle Analyticsを連携する方法」と「Google Analyticsを用いてコンバージョンを計測する方法」について解説しました。STUDIOでは、Google Analyticsの他にも様々なツールとの連携に対応しており、デザイン性、機能性に優れた本格的なサイトを制作可能です。STUDIOで本格的なサイトを制作したい方にとってGoogle Analyticsの連携やコンバージョン計測は必須の設定になるため、ぜひこちらの記事を参考に設定してみてください。

STUDIO導入のメリット・デメリットや、導入前に確認しておくべきことを資料にまとめました。STUDIOを活用したサイト制作をご検討中の方は、下記リンクよりぜひご覧ください。

※ 参考資料：STUDIOを活用するメリット・デメリット

STUDIOとGoogle Analyticsを連携する方法

現在（2023年2月時点）、STUDIOでは、ユニバーサルアナリティクス（UA）とGoogle Analytics4の連携に対応しています。STUDIOのプロジェクトにはどちらか一方しか接続できないため、これから接続設定を行う方は、基本的にはGoogle Analytics4を接続するのがおすすめです。（2023年7月1日をもってユニバーサルアナリティクス（UA）のサポートは終了される予定です。）

①Google Analyticsのアカウントを作成

まずは、Google Analyticsにアクセスしアカウントを作成します。「計測を開始」をクリックし、「アカウントの設定」「プロパティの設定」「レポートのタイムゾーン」「通貨」「ビジネスの概要」を入力するとGoogle Analyticsのアカウントを作成できます。作成済みの方は、Googleアカウントでログインしてください。
「アカウントの設定」では、まずはアカウント名を自由に作成します。

「プロパティ」はアクセス解析するWebサイトと紐づけられ、一つのアカウントの中に複数のプロパティを作成できます。プロパティ名も自由に作成できますが、特にこだわりがなければ接続したいWebサイトを識別できる名前（例：〇〇社コーポレートサイト）にしておくのがおすすめです。

次に提供するビジネスの情報を入力します。

最後に利用規約に同意すればアカウント作成完了です。

②Google AnalyticsのトラッキングIDを取得する

Google Analyticsの画面左下の⚙️歯車マークの「管理」から、STUDIOと紐付けたいアカウントとプロパティを選択し、プロパティ列の「データストリーム」をクリックします。

次に、プラットフォームに「ウェブ」を選択し、計測したいWebサイトのURL、ストリーム名を入力します。ストリーム名には、対象のWebサイトを識別できる名前を入力します。弊社の場合は、WebサイトのURLが｀「https://noroshi.design/」となり、ストリーム名は「NOROSHI Partnersサービスサイト」と設定しています。

次に、「ウェブストリームの詳細」の設定内の、「拡張計測機能」の設定を開きます。

「ページビュー数」の中の「詳細設定を表示」をクリックすると、「ブラウザの履歴イベントに基づくページの変更」が表示されるため、こちらのチェックを外し、右上の保存をクリックします。

上記の設定が終わったら、ストリームを作成し、「ストリームの詳細」から、「測定 ID」をコピーします。

③トラッキングIDをSTUDIOに連携

⚠️ このSTEPはSTUDIOでの操作になります。

次にGoogle Analyticsに連携したいSTUDIOのプロジェクトのダッシュボードを開きます。サイドバーの「Apps」からGoogle Analyticsを選択し、先程コピーした「測定ID」をペーストします。
※Appsの連携機能はSTUDIOの有料プランでのみ提供されています。詳しい料金プランはこちら

その後、「全体設定」の中の「公開設定」から「更新」をクリックすると、Google Analyticsの接続が完了します。

※STUDIOの公開設定を更新するとデザインエディタ上での変更箇所も全て公開されるため、更新しても良いかを事前に確認するようにしてください。

④Google Analyticsで接続を確認

最後に、Google Analytics上で、問題なくアクセス解析が開始されているかを確認します。サイト公開後、公開版のサイトに実際にアクセスします。アクセス後、Google Analyticsを開き、「過去 30 分間のユーザー」に表示されていれば、問題なく接続できてることを確認できます。

STUDIOのライブプレビューへのアクセスはGoogle Analytics上には反映されないため、サイトを更新した後に、実際に公開されているサイトにアクセスして接続の確認を行う必要があります。

Google Analyticsでコンバージョンを計測する方法

次にSTUDIOで制作したサイトのコンバージョン（お申し込み完了や資料請求等）を計測する方法について解説します。コンバージョン計測の設定前に、上記で説明したSTUDIOとGoogle Analyticsが既に連携されていることが必須となります。

設定の流れとしては、まずSTUDIO上で各コンバージョンのフォーム入力後に遷移させるサンクスページを作成し、次にGoogle Analytics上でサンクスページへのアクセスをコンバージョンとしてカウントする設定を行います。

⚠️ なお、ここからは全てユニバーサルアナリティクスではなく、Google Analytics4での設定方法となります。

①STUDIOでフォームとサンクスページを作成

まずは、STUDIOのデザインエディタ上で、コンバージョンのフォームとサンクスページを作成します。複数のコンバージョンポイントを用意する場合は、コンバージョンポイントごとにフォームとサンクスページを作成しましょう。サンクスページに設定したURLへのアクセスを、Google Analyticsで計測します。

▼サンクスページの例

フォーム機能の使い方やサンクスページへの遷移先の設定方法は下記の参考記事で詳しく解説していますので参考になさってください。

参考記事：STUDIOのフォーム機能を徹底解説！Zapierの自動返信設定から埋め込み可能なツールまで

②Google Analyticsでイベントを作成

次にGoogle Analytics上での設定に移ります。まずは画面左下の「管理」をクリックし、「プロパティ」列の「イベント」をクリックします。次に、「イベントを作成」から「作成」をクリックします。

カスタムイベント名は、コンバージョンに合わせてわかりやすいイベント名を設定しましょう。今回は「資料請求」に設定しました。

次に「一致する条件」の１列目の「パラメーター」を「event_name」、「演算子」を「次と等しい」、値を「page_view」に設定します。こちらで「event_name」を「page_view」に設定することで、特定のページが表示された回数をイベントとして計測できます。

次に「一致する条件」の「条件を追加」から２列目の条件を追加します。2列目の「パラメーター」を「page_location」、「演算子」を「次を含む」、「値」に先程STUDIOで作成したサンクスページのURLを設定します。「演算子」はまとめて計測したいコンバージョンにあわせて、適切なものに設定しましょう。こちらで「page_location」をサンクスページのURLに設定することで、サンクスページが表示された回数をイベントとして計測できます。最後に右上の「保存」をクリックするとイベントの設定が完了します。

③Google Analyticsでコンバージョンを設定

次に②で作成したイベントをコンバージョンに指定します。既にイベント名に作成したイベントが表示されている場合は、「コンバージョンとしてマークを付ける」をオンにすることで、イベントをコンバージョンに指定できます。

イベント名に作成したイベントが表示されていない場合は、「プロパティ列」の「コンバージョン」をクリックし、「新しいコンバージョンイベント」から、②で設定したイベント名を入力して、「保存」をクリックします。

こちらでGoogle Analytics上でのコンバージョンの設定が完了です。

④コンバージョン計測を確認する

最後に、コンバージョンが正常に計測されているかを確認します。
まずは、STUDIOで作成したサンクスページを公開し、実際にサンクスページにアクセスします。次に、Google Analyticsの「ホーム」から「リアルタイムを表示」をクリックすると、「コンバージョン（イベント名）」のボックスの中で、先程設定したコンバージョンが正しく計測されているかを確認できます。

設定したコンバージョンイベントが適用されるまでには、数分から数時間程度かかる場合があるため、正常に計測されていない場合は、しばらく待ってから再度確認しましょう。「イベント数（イベント名）」にのみ、イベントが表示されている場合は、コンバージョンとしての設定が完了していないので、③で説明した設定を再度確認しましょう。

まとめ

• STUDIOとGoogle Analyticsを連携して、アクセス解析が可能

• まずは、Google AnalyticsでトラッキングIDを取得し、STUDIOのダッシュボードから接続が可能

• コンバージョン計測は、STUDIOで制作したサンクスページのURLをGoogle Analyticsに紐付けることで計測可能