ノーコードWeb制作プラットフォーム「Studio」、とても便利で素晴らしいツールですよね。直感的な操作でデザイン性・機能性の高いWebサイトが作れるため、多くの企業がStudioを活用してWebマーケティングに取り組んでいます。
しかし、Studioで作ったWebサイトやランディングページをWeb広告の遷移先として使っている方の中には、「広告経由でサイトに流入しているのに、コンバージョンが計測されない」という問題に直面している方も多いのではないでしょうか。
Studioは「SPA（Single Page Application）」という仕組みで構築されており、対する「MPA（Multi Page Application）」形式のWebサイトとは異なる動作をするため、一般的な計測方法では、正確なデータが取得できないことがあるのです。
この記事では、なぜStudioで作ったWebサイトでコンバージョン計測に問題が生じるのか、その原因から解決方法（画像解説付き）まで解説します。
Studioとは？
改めて、Studioとは、コードを書かずにWebサイトの構築・公開・運用ができる、ノーコードWeb制作プラットフォームです。直感的な操作で、こだわったWebサイトを作成でき、デザイナーや非エンジニアでも本格的なWebサイトの制作が可能です。
弊社のHPもStudioを使って制作しており（記事執筆時点）、弊社のお客様でもStudioを活用してWebマーケティングに取り組まれている企業が多々あります。
※関連サイト：Studio | ノーコードWeb制作プラットフォーム
SPA（Single Page Application）とは？
SPA（Single Page Application）とは、単一のHTMLページで動作するWebアプリケーションの構成方式です。多くのWebサイトで採用されているMPA（Multi Page Application）が複数のHTMLページを行き来するのに対し、SPAはJavaScriptを使って動的にページ内容を切り替える技術です。これにより、ページ全体を再読み込みすることなく、必要な部分だけを更新できます。
※画像引用元：今さら聞けないSPA（シングルページアプリケーション）とは – Qiita
Studioで作成されるサイトもSPA形式で構築されるため、ページ遷移が高速で滑らかな動作を実現しています。
しかし、この仕組みにより、従来のGoogleアナリティクスなどの計測ツールでは正確なページビューやコンバージョンが測定できない場合があります。そのため、今回のようにGTM（Googleタグマネージャー）を使った特別な設定が必要になるのです。
なぜStudioでコンバージョンが正確に計測できないのか？
MPA形式のWebサイトでは、ページ遷移時に新しいHTMLが読み込まれ、その際に設置されている計測タグも併せて読み込まれるため、コンバージョン等が計測されます。
しかし、Studioの場合、URLやページタイトルが変わっても、ブラウザ上では実際のページの再読み込みが行われていません。ユーザーから見ると別のページに移動したように感じられますが、技術的にはJavaScriptによる画面の切り替えが起こっているだけです。
そのため、1ページ目では問題なく動作していた計測タグが、2ページ目、3ページ目では実行されない現象が起きてしまいます。たとえば、サイトトップから問い合わせフォーム、そして送信完了画面へ進んだとしても、完了画面で本来発火すべきコンバージョンタグが動かず、コンバージョンが計測されないという問題が発生します。
これを解決するには、通常のページ読み込みとは別に、Studio特有のページ切り替えタイミングを検知できる仕組みをGoogleタグマネージャーで設定する必要があります。
Studioで制作したWebサイトで、コンバージョン計測ができない場合の解決方法
まず初めに、本記事の執筆にあたり、以下の記事を参照させていただきました。設定時は、合わせてこちらの記事も確認いただくと、より理解が深まると思います。
※参照：[GTM] GA4によるSPA計測の罠と対策 – アユダンテ株式会社
※参照：Studio.Designで作ったサイトのコンバージョン計測の設定方法 – スモビジマーケch
※参照：Googleタグマネージャーを使ってクリックイベントをGoogleアナリティクスで計測する方法 – Studio.Help
この設定で実現できること（ゴール）
今回ご紹介する設定により、Studioで制作したWebサイトでのGoogle広告コンバージョン計測が正常に機能するようになります。
Studioのフォーム機能を使用してフォームを作成した場合、送信完了時に指定した完了ページに遷移する仕様となっています。今回の設定により、そうした完了ページへの遷移を伴うコンバージョン（お問い合わせ完了や資料請求完了など）を正確に計測できるようになります。
通常のページ読み込みと履歴変更の両方のタイミングを検知できるようになり、特定の完了ページ（設定例ではURLに「thanks」が含まれるページ）でのコンバージョン検知が可能になります。
これにより、従来のStudioで制作したWebサイトでご相談されることの多い「ページ遷移後にタグが発火しない」「コンバージョンが正しく計測されない」といった問題の解決が期待されます。
ただし、HubSpotのフォームのようにリダイレクトでページ遷移される場合は、この設定は不要です。
用意するもの
- Studio
- Googleタグマネージャー（GTM）
- Google広告 アカウント
事前準備として、StudioとGTMの連携が完了していること、Google広告でコンバージョンアクションが作成済みであること、そしてGTMの基本的な操作方法を理解していることが前提となります。これらの準備が整っていれば、5分程度で設定が完了します。
設定方法
まずタグやトリガーの作成前に、「変数」を作成していきます。データレイヤー変数を2つ作成するのですが、これらはStudioで制作したWebサイト内でブラウザの履歴に変更が発生した際に、変更前と変更後のURLを取得するためのものです。ただし、履歴変更はページ遷移以外でも発生するため、後の手順で『実際にページが変わった場合のみ』を判定する仕組みを追加します。
Googleタグマネージャーの左カラム「変数」より、「ユーザー定義変数」の右側にある「新規」ボタンをクリックします。
名称を「履歴変更前のURL」（※この名称は任意で変更可能）と入力し、「変数のタイプ」は「データレイヤーの変数」を選択、「データレイヤーの変数名」には「gtm.oldUrl」と入力します。下の画像の通りになったら、右上の「保存」をクリックします。
同様の手順で、Googleタグマネージャーの左カラム「変数」より、「ユーザー定義変数」の右側にある「新規」ボタンをクリックします。
名称を「履歴変更後のURL」（※この名称は任意で変更可能）と入力し、「変数のタイプ」は「データレイヤーの変数」を選択、「データレイヤーの変数名」には「gtm.newUrl」と入力します。下の画像の通りになったら、右上の「保存」をクリックします。
これらの変数により、Studioサイト内で履歴変更イベントが発生した際に、変更前後のURLを取得する土台が整いました。
ここで注意点があります。Webサイトでは、実際のページ移動以外でも履歴変更イベントが発生することがあります。たとえば、同一ページ内でのスクロールや要素の表示切り替え、URLのハッシュ部分（#以降）のみの変更などです。また、一回のページ遷移で履歴変更が複数回発生するケースもあります。
コンバージョン計測では、こうした履歴変更ではなく、実際にページURLが変わった場合のみタグを発火させたいですよね。そこで、次のステップとして、先ほど設定した2つの変数を使って「本当にページが変わったかどうか」を判定するカスタムJavaScript変数を作成します。
この変数により、移動前後のURLを比較し、実際にページが切り替わった場合のみを正確に検知できるようになります。
Googleタグマネージャーの左カラム「変数」より、「ユーザー定義変数」の右側にある「新規」ボタンをクリックします。
名称を「カスタム JavaScript（URLの切り替え発生）」（※この名称は任意で変更可能）と入力し、「変数のタイプ」は「カスタムJavaScript」を選択します。
「カスタム JavaScript」の欄には以下のコードをコピーして入力してください。
function(){
return {{dataLayer - gtm.newUrl}} !== {{dataLayer - gtm.oldUrl}};
}このコードを使い、変更前のURLと変更後のURLが異なる場合に「true」、同じ場合に「false」を返すようにします。これにより、本当にページが変わった時だけを判定できるようになります。
トリガーの作成
Googleタグマネージャーの左カラム「トリガー」より、右上の「新規」ボタンをクリックします。
名称を「CV（資料請求完了）_URLの切替発生」（※この名称は任意で変更可能と入力し、「トリガーのタイプ」は「履歴の変更」を選択、「このトリガーの発生場所」は「一部の履歴の変更」を選択、条件設定では以下のように入力します。
- {{カスタム JavaScript（URLの切り替え発生）}} ※変数（Select variable）
- 等しい
- true
このトリガー設定により、ページが切り替わった時を判定できるようになりました。
またこの設定に加えて、ページURLに「thanks」が含む場合にのみ発火するよう条件を追加することで、資料請求完了ページやお問い合わせ完了ページなど、特定のぺージでのコンバージョンを計測できます。
作成中のトリガーに以下の設定を追加します。
- {{Page URL}} ※変数（Select variable）
- 含む
- thanks
以下の画像のように設定ができたら、右上の「保存」をクリックして完了です。
Google広告コンバージョンタグの設定
最後に、このトリガーを使ってGoogle広告のコンバージョンタグを作成して完了です。Google広告のコンバージョンタグ設定方法については、参考になる記事が多数公開されているので本記事では割愛させていただきます。
まとめ
Studioで制作したWebサイトで一般的なタグ設定を行ってもGoogle広告のコンバージョン計測ができない問題は、StudioがSPA構造で構築されており、ページ遷移時にHTMLの再読み込みが発生しないことが原因です。ただし、これはStudioに問題があるわけではなく、SPAという仕様によるものです。
この記事でご紹介した設定により、「履歴の変更」トリガーを活用してStudioのSPA特有のページ遷移を検知できるようになります。設定完了後は、GTMのプレビュー機能とGoogle広告の管理画面で正常に計測されていることを必ず確認してください。
