EMのどんちゃんです。弊社では、CRMにHubSpotを使用しており、顧客からの問い合わせもHubSpotに実装されているフォーム機能を使用し、WordPress(=WP)で構築されたコーポレートページに埋め込んでいます。
今回は、GoogleAnalyticsでフォーム送信をコンバージョンとして計測し、Looker Studioでレポート化するにあたって、引っかかったところなどを備忘録的にまとめていきます。
同じことをやりたい事業会社は多いと思うので参考になれば幸いです！
ゴール
モザイクだらけで恐縮ですが、こんな感じのLooker Studioのレポートができること(CVR)
今回の環境
- サイトはWordPress
- フォームはHubSpot
- 計測はGoogle Analytics
前提
WordPressのサイトにはGAが導入されていること
やったこと
form_submitの検知ができない問題を解決する
GoogleAnalyticsのキーイベントにform_submitが検知されないという問題があります。
これは、WordPressにHubSpotのフォームをiframeで埋め込んでしまい、GAがイベントを検知できないからです。
解決
HubSpotのフォームを埋め込む場合、こんなタグを埋め込みますが、onFormSubmit関数を追加してあげることで、HubSpotのフォームがSubmitされた際に明示的にGAにイベントを送信できます。
<script>
hbspt.forms.create({
region: "eu1",
portalId: "*********",
formId: "********-****-****-****-************",
+ onFormSubmit: function($form) {
+ gtag('event', 'form_submit', {
+ form_id: 'hubspot_contact'
+ });
+ }
});
</script>
GoogleAnalyticsで受け取ったイベントをキーイベントに追加
公式ドキュメントを参考に、先ほどWPから送信されるようにしたform_submitイベントをキーイベントに設定します。
この際、実際にイベントが送られていないと表示されないので、試しにHubSpotからフォーム送信しておくといいでしょう。
また、Google Analytics Debugger拡張機能を使用すれば、GAのDebugViewでリアルタイムにイベントを検知できるようになるのでテストに便利です。
フィールドを更新してLooker Studioにキーイベントを反映
僕がハマったのはここ。一向にキーイベントが検知できない…。
どうやらデータソースからフィールドを更新しないといけないとのことでした。
具体的な更新方法
2025/9/8時点のUIです
スコアカードを追加してCVRを表示する
これだけで表示できるようになります。
あとは書式を設定して完了です🎉
Discussion