ミックスパネラーの國崎です。
今回はmixpanelにiframe内のフォームデータをGTMを使って取得させるやり方について解説します。
前提条件
この記事では以下の条件を満たしている方向けへの記事となります。
- GTMを使ったmixpanelのタグ埋め込みはできている
- iframeの呼び出し元と呼び出し先が異なるドメインである
- HTMLのタグを読むくらいはできる
GTMを使ったmixpanelの組み込みについては以下記事で説明しているので、通常の組み込み方法を知りたい方はこちらをご覧ください。
Googleタグ マネージャーを使ってMixpanelを初期導入してみる
iframeの情報を取得するための事前準備
mixpanelでiframeのフォームデータをGTMで取得するにあたり、以下の準備が必要になります。
iframeを組み込んでいる親ページとiframe内の子ページのGTMタグをmixpanel計測のGTMタグと揃える
こちらが出来ていないと、iframe内の情報をmixpanelに送信することができないです。
iframe内の子ページにGTMを仕込んでいないケースは多いと思うので、こちらにも仕込むことを失念しないようにしましょう。
GTMでの操作
ここからはGTMでどのような操作を行なったか順を追って解説します。
変数を作成する
まずiframeのフォーム内のデータを取得するための変数をGTM内に作成します。
変数の作り方はGTMのワークスペースにある左メニューの変数を選択。
新規>変数タイプでカスタムJavaScriptを選択。
表示された入力欄にiframe内のフォーム情報を取得するためのJavaScriptを書きます。
参考までに以下一通りのフォーム内の情報を取得するためのコードを記載します。
お使いのフォーム設計により使えない場合もありますので、ご了承ください。
//ページタイトル
function() {
var title = document.title;
return title;
}
//ラジオボタンの選択された要素
function() {
var tagItems = document.querySelectorAll('取得する要素のクラス名');
var tagTexts = [];
tagItems.forEach(function(tag) {
if (tag.textContent) {
tagTexts.push(tag.textContent);
}
});
return tagTexts;
}
//チェックボックスの選択された要素
function() {
var form = document.getElementById('フォームのID');
var checkedThemes = [];
if (form) {
var elements = form.querySelectorAll('フォームのクラス input[type="checkbox"]');
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) {
var label = form.querySelector('label[for="' + elements[i].id + '"]');
if (label) {
checkedThemes.push(label.textContent);
}
}
}
}
return checkedThemes.length > 0 ? checkedThemes.join(", ") : null;
}
//テキストボックスの要素
function() {
var inquiryInput = document.querySelector('フォームID textarea');
if (inquiryInput) {
return inquiryInput.value;
}
return null;
}ここで書くJavaScriptはChatGPTで自動生成することもできます。
ChatGPTを使ってJavaScriptのコード生成
ChatGPTを使ったコード生成のやり方としては以下の手順。
- データ取得したいフォームのコードを流し込む
- フォームの中から取得したい情報をGTMのカスタム JavaScript 変数を使用して抽出する記述を聞く
- ChatGPTがコードを書き出してくれる
実際の画面を例に見せると以下のやり取りです。
私の質問画面
ChatGPTの回答画面
こういった使い方をすれば、JavaScriptを書くのが苦手な方でもコードを自分で作成することができます。
タグの設定
カスタム変数を作成した後は、mixpanelで計測するためのタグを設定します。
タグの種類でmixpanelを選択し、プロジェクトトークンには計測する先のmixpanelのトークンを記載します。
Tag Typeには-Trackを指定します。
Track Optionsには計測する先のイベント名とプロパティ名を設定します。
プロパティ名のValueには変数で作成した変数名を入れます。
トリガーの設定
続いてトリガーの設定です。
トリガーのタイプはフォームの送信にします。
トリガーの発生場所は送信したいフォームのURLなど、そのフォームが特定できる条件を入れます。
トリガーを設定したら先ほど作成したタグと関連づけます。
これで設定自体は完了なので、あとはプレビューでテスト申し込みをしてmixpanelで計測できているか確認します。
mixpanelの画面で計測を確認
mixpanelのEventsでデータの計測を確認します。
タグで設定した項目が取得できていることを確認しました。
以上GTMを使ってiframeのフォームデータをmixpanelで取得する手順説明でした。
mixpanelのお問い合わせはクラスメソッドまで！
クラスメソッドではmixpanelの導入支援、伴走支援を手厚く行なっております。
mixpanelがどんなもんか知りたい！使い方を教えて欲しい！もっと活用方法を知りたい！
と言う方はぜひぜひクラスメソッドまでお問い合わせください！！
5
