Contact Form 7 とスプレッドシートを連携して、顧客の閲覧履歴をスコアリングしてみよう

はい、ごめんください。コンセプトダイアグラムが大好きなコスギです。

タイトルに惹かれた方は、ちょいと以下の3つの質問に回答してから、下に進んでください。

Q1. コンセプトダイアグラム(CD)は好きですか?

Q2. 顧客分析(カスタマーアナリティクス:CA)ってイイと思いません?

Q3. CDとCAは難しいと感じますか?

 

私はいつもブレスト代わりに使っているコンセプトダイアグラムですが、本来はカスタマーアナリティクス(顧客分析)に使うためのメソッドなんですよね。とはいえ私も正直なところ、なんとなくの知識があるだけで、圧倒的に経験が足りていません。

ということで、清水誠さんが公開しているデモを実際になぞってみることから始めました。

今回の説明で用意するものは、どこの会社にもある以下の3つ!

  • Google タグマネージャー(GTM)で Google アナリティクス(GA)が実装されている
  • WordPress でつくられたホームページ
  • それらの管理権限

です。お手軽ですね!!!

顧客を個客で把握する

Google アナリティクスはユーザー(訪問者)を識別して、その人が新規訪問者なのかリピーターなのかを判断しています。当然、リアルと100%合致するほど識別できるわけではありませんが、ある程度信用できる値として扱うことができます(詳細)。

ユーザーを識別できるということは、それぞれのユーザーに識別子がついているということです。それが「Client ID」。これによって、ユーザーに紐付いた解析ができるようになるんです。とはいえ、Google アナリティクスでは個人情報を扱ってはいけないので、あくまでもミクロ分析です。これがまたオモシロイんだ……!

ですから、Google アナリティクスを利用してカスタマーアナリティクスを行う際には Client ID を使うことが前提です。どう使うかは後述しますが、「クライアントIDというもので顧客を識別する」ということは覚えておいてください。

見込客を閲覧履歴でスコアリング

→ Demo 01. B2Bのリードを閲覧履歴でスコアリング – 清水誠メモ

今回の本題です。

カスタマーアナリティクスの基本は、顧客(個客)の背景を知り、マーケティングに活かすこと。相手のどんな背景がわかれば良いのかを定義しておき、それらを Google アナリティクスなどの解析ツールで取得すれば良いんです。

たとえば「資料請求をした人が、過去にどんなページを閲覧したのか」がわかると、相手がどれくらいの熱意を持っているのかがわかりますよね。

  • 様々なページを何日もかけて見てから資料請求した人
  • 特定のカテゴリに属するページを見てから資料請求した人
  • 数ページだけ見てから資料請求した人

といった情報がわかるだけでも、ワクワクしてきませんか?

デモのように「どのグループを見ているか」を知るには、あらかじめグループの定義をしておく必要はありますが、どんなタイミングで閲覧したのかをリストアップするのは、それほど難しくはありません。

まずは実装してみることを最優先に、やってみました!

1. フォームを作ってスプレッドシートと連携させる

清水さんの記事を見ながら、Google フォームをサクッと作ります。ふむふむ、「本ページを参考にしてフォームのHTMLページを作る」……って、意外とハードル高っ!?

やっているのは Google フォームを iframe で埋め込むのではなく、自分のサイトから Google フォームを経由させて送信する方法です。「postToGoogle」で検索すると方法がわかるんですが、基本的に英語の情報……まあ、ウェブ解析を行う人間はここまでできると良いのは間違いないんですが、なかなか導入しにくいのではないかなと。

ということで、困った時のフォームプラグイン、コンタクトフォームセブン〜!(テッテレテッテテッテレテッテッテー)

スプレッドシートに送信情報と Client ID を保管させる

要するに、送信情報と Client ID が Google スプレッドシートに入ってくれば良いので、Google フォームでの実装をあきらめ、WordPress のフォームプラグイン「Contact Form 7」をスプレッドシートに連携させる方法を考えてみました。CF7 Google Sheets Connector というプラグインがあるので、インストールして設定すれば使えるようになります。設定の方法は割愛しますが、そんなに難しくはありません。

一点、Client ID 用の入力欄を隠し要素として、以下の1行をフォームテンプレートに入れておいてください。

[hidden clientid id:cid]

ここに Client ID の値を入れるのですが、こればっかりは JavaScript に頼るしかありません。WordPress にはあらかじめ jQuery が仕込んであるので、それを利用しましょう。以下のコードで、送信ボタンを押した際に Client ID を挿入することができます。タイムラグを感じるようなら、ページを読み込んだときでも良いかもしれません。

<script type="text/javascript">
jQuery(function($){
	$('.wpcf7-submit').on('click', function(){
		$("#cid").val("x" + ga.getAll()[0].get('clientId'));
	});
});
</script>

Google タグマネージャーでカスタム HTML のコンテナに入れるのが一番安全ですが、WordPress の該当ページに直接記述しても動きます。

これで「フォームを作ってサイトに埋め込む」フェーズができました。実際に稼働しているのが、この記事の最初にあったフォームです。CF7 は画面遷移がないので、こういうときに使いやすいですね。

これで、「フォームの情報と Client ID をスプレッドシートに登録する」ことができるようになりました。

とはいえ、Client ID は Google アナリティクス内でしか使えないものなので、外部から参照できるようにする必要があります。次から Google アナリティクスと Google タグマネージャーでゴニョゴニョしましょう。

2. GAでカスタムディメンションを作成

では、Google アナリティクスの設定です。

[管理]→ プロパティ で下の方に行くと、カスタム定義の項目に「カスタムディメンション」があります。[新規追加]で以下のように入力して[作成]しましょう。
名前:clientID 範囲:ユーザー です。「アクティブ」には最初からチェックが入っています。

Google アナリティクスでカスタムディメンションを設定

これで Google アナリティクス側の設定はOKですが、あとでトラッキング ID が必要になるので、同じプロパティのカテゴリから「トラッキング情報」→「トラッキングコード」のページに記載されているトラッキング ID(UA-XXXXXXX-X)をわかるようにしておいてください。これで、「Client ID を外部で使うための変数」ができました。

※ディメンションは「軸」なので、「指標」であるカスタム変数とは違うのですが、ここでは Client ID というデータをGA以外でも使えるようにするための変数と覚えておいてください。

※普段家族でゴハンを食べていた人たちが社員食堂を始めることになり、来客用の食器を用意するようなイメージです。まだ、食器を用意しただけの状態。

3. GTM でカスタム JavaScript を作成

次は、Google タグマネージャー側の設定です。JavaScript 変数をつくりたいので、左側にある「変数」から作っていきましょう。

Google タグマネージャーのサマリー画面

「ユーザー定義変数」→[新規]で変数を設定し、「カスタム JavaScript」を選んでいきます。

カスタムJSでClient IDを取得できるようにする

名前はあとで使うので、わかりやすいものなら何でも良いのですが、カスタム JavaScript には以下のように入れておきましょう。

function() {
  return function(model) {
    model.set('dimension1', model.get('clientId'));
  }
}

dimension1は、GAの設定に合わせてください。これで、「取得した Client ID をカスタムディメンションに格納するための機能」ができました。

※来客用の食器にゴハンを盛りつける人が決まった状態です。この盛り付けおばちゃんは、具体的に何をしたら良いのかまだわかっていません。

4. GTM の Google アナリティクス設定で customTask を作成

上記と同様に、再度 JavaScript 変数をつくりますが、今度は「カスタム JavaScript」ではなく「Google アナリティクス設定」を選びます。

トラッキング ID:GAのトラッキングID 設定するフィールド名:customTask 値:先程設定したカスタム JavaScript の名称 をそれぞれ設定しましょう。

Google タグマネージャーで customTask を設定

日時の追加もしておくと良いのですが、今はこのまま進めましょう。

※盛り付けおばちゃんに出す指示の内容を決めただけの段階です。今決めたルールは「お客さんが来たら所定の食器にゴハンを盛り付けて渡してね」という指示。次はこのルールをおばちゃんに伝えなければなりません。

5. Google アナリティクス設定変数に CustomTask をセット

これができていないと、Client ID が取れません。

左側にある「タグ」から、すでに設定してあるはずの Google アナリティクスタグの設定を開きます。

ここで、「Google アナリティクス設定」の項目をクリックして、上記で設定したカスタムタスクの設定変数をセットします。オーバーライド設定は無効にしておいて(チェックをはずして)ください。

Google アナリティクス設定変数をセット

これで、取得した Client ID をカスタムディメンションに格納するための機能を「動かせる」ようになりました。

※先程の指示を盛り付けおばちゃんに伝えた状態です。これで準備万端。あとはお客さんが来るのを待つだけです。

ここまで設定できれば、フォームの入力データと Client ID が Google スプレッドシートに登録されます。

まずは、ここまで。

このサイトでやっているので、大したコンバージョン設定もできていないのが難点ですが、データが取れてからビジュアライズして解析したレポートを追記していきます✧٩( ‘ω’ )و✧