趣旨

MAツールにはトラッキング機能があり、主にフォームコンバージョン、ログイン、メールURLクリック時にcookieがリードデータと紐づくようになっています。

今回はこうしたMAツールと同様、フォームの入力データとcookie情報を紐づけてDBに蓄積させるデモを作ってみます。

こうした仕組みを作ることにより、各リードがどういったアクセスを行ったのかを可視化することができます。なお、この情報を元にスコアリング、セグメント分けも可能ですが、このような分析処理は今回の範囲外とします。

サンプル

1.入力フォーム画面

https://myfirsraccount.firebaseapp.com/form_clientId.html

→「form test / masato」と入力し、「送信」ボタンを押します。このときのGoogleアナリティクスのCookie("clientId"と呼ぶ)はキャプチャで選択しているCookie"__ga"のValueです。

2.Firebaseのデータベース

https://console.firebase.google.com/project/myfirsraccount/database/myfirsraccount/data?hl=ja
(プライベートなDBなのでアクセス不可)

ユーザーが入力したデータとCookieがセットされていることが確認できました。

実装方法

1 HTMLでフォームを、FirebaseでDBを用意する

フォームからDBに直接POSTされるようにします。
https://norm-nois.com/blog/archives/4041

form_clientId.html

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Realtime Database</title>
    <style>
        form input[id="gaClientId"]{display: none;}
    </style>
    <script defer src="/__/firebase/4.6.1/firebase-app.js"></script>
    <script defer src="/__/firebase/4.6.1/firebase-database.js"></script>
    <script defer src="/__/firebase/init.js"></script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-TCJ44ZN');</script>
    <!-- End Google Tag Manager -->
</head>
<body>
    <form>
      <input name="name" type="text" id="name">名前
      <input name="comment" type="text" id="comment">問い合わせ内容
      <button id="write" type="button">送信</button>
    </form>
</body>
</html>

2. GTMでGAのclientIdを取得するjsを用意する

以下いずれかの方法で実装します。

ダイレクトにCookieからGAのclientId取得する方法

formSetClientId.js

//=タグ:formSetClientId

var trackers = ga.getAll();
var gaClientId ="";
trackers.forEach(function (tr) {
  if(tr.get('name') == 'mainTr'){
    gaClientId=tr.get('clientId');
  }
});
//→"gaClientId"に求めるCookie情報が入ります

GoogleアナリティクスのCustomTaskという機能を使う方法

以下いずれかの記事をご覧ください
https://makoto-shimizu.com/news/how-to-measure-google-analytics-client-id-with-gtm-2017/
https://www.simoahava.com/gtm-tips/use-customtask-access-tracker-values-google-tag-manager/

3. GTMで入力内容と一緒にclientIdをDBに送るjsを用意する

formSetClientId.js

//=タグ:formSetClientId
...

document.getElementById('write').addEventListener('click', function() {
    firebase.database().ref().set({
      name: document.getElementById('name').value,
      comment: document.getElementById('comment').value,
      gaClientId: gaClientId
    }).then(function(){
      alert('問い合わせありがとうございます!');
    });
});

GTMを公開すれば完成です！

何かあればお手数ですが、本記事か以下アカウントでお知らせください！

\ Follow Me! /
Qiitaアカウント
Twitterアカウント