2022年6月13日に、回答データをデータレイヤー変数として出力する機能がリリースされました！
これまで、回答内容を完了画面に引き継ぎたい、コンバージョンタグに渡したいといった要望を多くいただいており、それにお応えして実装した機能となります。
これでフォームメーラーがさらに便利になりました！
・・・ところでみなさん、そもそも「データレイヤー変数」ってなにかご存知でしょうか？
データレイヤー変数がなんのことかわからないのに「便利になりました！」と言われても・・ ・というみなさんのために、今回データレイヤー変数とはなにか？ どうやって使うと便利なのか？
を紹介していきたいと思います。
そもそもデータレイヤー機能とは？
「データレイヤー変数」は、あまりなじみがないフレーズかもしれません。
一言で説明するなら、「ページの情報をGoogleタグマネージャで使用できるよう引き渡すための変数」（データ）です。
・・・Googleタグマネージャに引き渡すってどういうこと？！
実はGoogleタグマネージャのタグを設置したページの情報は、Googleタグマネージャの中で自由に参照したり、取り出して加工して使用することができるんです。
そのためにページの要素を格納したデータを「データレイヤー変数」と呼んでいます。
そして、ページの要素以外のデータも同じように使用したい場合は、データレイヤー変数に渡すことで、Googleタグマネージャの中で使えるようになるのです。
フォームで送信した回答データは完了画面に表示されていなくても、Googleタグマネージャに渡しているので、参照できるようになっています。
次は実際にどのような利用方法があるのか、紹介していきます。
データレイヤー機能の用途を紹介
実際にどのような用途でデータレイヤー変数が活躍するのでしょうか。
Googleタグマネージャにデータを渡すということは基本的にはその先の外部サービスで何等かの計測を行うことが殆どになるかと思います。
例えば
ウェブ広告のランディングページとしてフォームメーラーを利用した場合、複数の広告ごとの成果を図りたい
このケースでは、まず広告ごとに異なるURLパラメータをフォームのURLに付与します。
受け取ったパラメータは隠しフィールド（hidden）でフォームに渡しましょう。
送信完了画面で、隠しフィールドの値をGoogleタグマネージャに渡せば、広告ごとのコンバージョン値を広告のプラットフォームに渡すことができます。
他にも
資料請求のランディングページを作成し、アフィリエイト広告を出稿したい
といった場合にも、ランディングページへのアクセスで付与されているパラメータを、送信完了画面でアフィリエイトタグに引き渡す、といった形で実現することができます。
実際の設定手順を紹介
文章で説明してもなかなかイメージしづらいかと思います。
実際にランディングページを使用してデータレイヤー変数を活用する実例を設定手順と合わせて確認してみましょう。
まずはランディングページの準備です。
今回はテスト用の商品を１つだけ販売する注文フォームで試します。
隠しフィールドを設置しましょう。ここでは「param」という名前をつけています。
フォームの環境設定からGoogleタグマネージャの設定を忘れずに行ってください！
実際のフォーム。隠しフィールドはフォームからは見えません。
これでフォームの準備ができました。
データレイヤー変数の確認の前に、URLパラメータで隠しフィールドにちゃんと値を渡せているかテストしましょう。
フォームのURLの末尾に「?param[0]=123456」とつけてアクセスしてみます。
※URLパラメータで初期値を設定する場合は項目名の後ろに[0]をつけてください。
パラメータの設定についてはこちらで詳しく説明しています。
確認画面でも隠しフィールドは表示されません。
1000円の注文を行いました。
回答データに、「param」と「123456」が確認できます。
これで注文フォームの準備ができました。
次に、実際にGoogleタグマネージャ上でデータレイヤー変数の確認と
簡単に変数として使ってみましょう。
Googleタグマネージャのプレビューで動作を確認する
続いてはGoogleタグマネージャで動作を確認します。
Googleタグマネージャを使ったことがない、という方はこちらの記事も参考にしてみてください。
https://blog.form-mailer.jp/know-how/gtm_procedure/
タグマネージャーのワークスペースにログインして「プレビュー」モードにしましょう。
先ほど作成したフォームのURLをパラメータ付きで入力します。
そのままプレビューモードでフォームからデータを送信します。
送信完了画面のTagアシスタント画面で値を確認します。
この画面で「DataLayer」タブを選択すると出力されているデータレイヤー変数とその値を確認することができます。
出力されていますね！
これでGoogleタグマネージャにフォームからの送信データを渡すことができるようになりました。
では実際にGoogleタグマネージャ側でフォームから受け取ったデータを使ってみましょう。
データレイヤー変数はGoogleタグマネージャ側で「この変数をこの名前で使います」と明示的に設定する必要があります。
設定はワークスペースのメニューの「変数」から
ユーザー定義変数の「新規」より
変数のタイプで「データレイヤーの変数」を選択。
隠しフィールドのparamを変数として設定
ついでに「名前」も変数として設定します。
これでフォームの投稿内容のうち「param」と「名前」をGoogleタグマネージャで使うことができるようになりました。
次はテスト用に「タグ」から「カスタムHTML」でタグを作成してみます。
今回は名前を表示するだけの簡単なものですが、実際にはここで計測タグなどを設定して使う場合が多いと思います。
変数をタグの中で使う時は「{{変数名}}」と二重の「{}」で囲む必要があります。
Paramの値が「123456」だったら送信された名前をポップアップ表示する、という簡単なコードです。
タグに発火条件のトリガーを設定します。
今回は送信完了画面のURLの時だったら、という条件にしました。
設定が完了したら、フォームのURLにまた「?param[0]=123456」とパラメータを付与して
フォームから送信してみます。
名前がポップアップで表示されました！
param[0]の値を123456以外に設定しても名前のポップアップは表示されません。
今回は視覚的にわかりやすいようにポップアップで表示しましたが、 アフィリエイトプログラムをフォームで行う場合に購入金額を成果タグ内に出力したり、
URLパラメータで渡した流入元ごとに分けたパラメータを計測タグに出力して送信したりすることが可能です。
まとめ
データレイヤー変数はフォームメーラーで業務が完結せず、フォーム送信後も入力内容を外部サービスで活かしたいという方に重要な機能です。
設定がややこしく、視覚的にも把握しづらいため馴染みづらい機能ではありますが、 業務の幅をグンと広げてくれる可能性を秘めています。
ぜひデータレイヤー機能を活用してフォームの新しい可能性をお試しください。
データレイヤー機能が使えるフォームメーラーの有料版のうちBusiness版なら
14日間無料で利用可能です。
この記事の手順通りに設定して実際にお試しいただけたらデータレイヤー変数を理解しやすいと思いますので、ぜひお試しください
【Business版14日無料トライアル】