concrete5でユーザー登録→Mauticのコンタクトへ追加するトラッキングコード




Mautic
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Contact Form 7(など)とMauticを統合できる「WP Mautic Form Integrator」のように、オープンソースCMSとのプラグイン連携も見られるようになったMauticですが、トラッキングコードを少しカスタマイズしてあげる事でも、ユーザーの情報をMautic側にポストすることができます。

元となるトラッキングコード

Mauticの標準トラッキングコードはピクセルコードです。concrete5のMauticプラグインを使った時も、ピクセルコードが挿入されます。

これに対し、Mautic管理画面の歯車メニューから「設定」 > 「ランディングページ設定」にある「サードパーティ製Webサイトトラッキングコード」を利用することで、上記のポストが可能になります。

トラッキングコード

公式サイトのコンタクトのモニタリングを参考に、mt()内にポストしたい内容を記述してあげればOKです。Google Analyticsのコードカスタマイズにも似ていますね。

また、ポスト先のMautic側のフィールド名は、歯車メニューの 「カスタムフィールド」で確認できます。

カスタムフィールド

カスタムフィールド一覧の「エイリアス」列がフィールド名です。メールアドレスであれば「email」にポストします。これを実行するトラッキングコードは、下記のようになります。

<script>
    (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','[Mauticを設置したURL]','mt');

    mt('send', 'pageview', {email: "[メールアドレス]"});
</script>

その他の項目を追加するのであれば、{}内にポストしたい情報をフィールド名とセットで追記すればOKです。

このタグを全ページに設置してもよいのですが、毎回データがポストされるのはデータのやり取りが多くなるので、concrete5のユーザー登録時にMauticにメールアドレスとユーザーIDをポストします。

実装趣旨は以上になります。以下、その手順です。

その0. POSTする項目を決める。

とりあえず今回は、concrete5のユーザー登録時のデフォルト項目「メールアドレス」と「ユーザーID」を渡してみます。Mautic側のPOST先は、「Email」と、とりあえず「First Name」にします。

  • メールアドレス:Email(フィールド名 ”email”)
  • ユーザーID:First Name(フィールド名 “firstname”)

その1. Mauticのフィールド情報を外部から更新可能にする

Mauticで生成されたフォームや管理画面からではなく、外部からコンタクト情報を更新させるには、カスタムフィールドごとに更新可能設定が必要です。カスタムフィールド一覧から「email」と「firstname」それぞれ、選択して開く編集画面右側の「パブリックに更新可能」を「はい」にします。これをやらないと、キチンとコードを設置しても更新されませんので注意。

public_update

その2. register.phpへタグを追記する

concrete5のユーザー登録画面は、 /concrete/single_pages/register.php で制御されています。このファイルを別の開発領域などに複製し、最下部にトラッキングコードを追記します。

concrete5でユーザー情報を取得する方法は、公式サイトの開発者向けページで説明されています。また、concrete5ではユーザー登録後すぐにログインした状態にできるので、元となるトラッキングコードに対し「ログインしていればメールアドレスとユーザーIDを取得してコードを追記して出力、それ以外は標準コードを出力」という風に記述します。

<script>
    (function(w,d,t,u,n,a,m){w['MauticTrackingObject']=n;
        w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments)},a=d.createElement(t),
        m=d.getElementsByTagName(t)[0];a.async=1;a.src=u;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.wplng.com/mautic/mtc.js','mt');
	<?php
	$u = new User();
		if ($u->checkLogin()) {
			$ui = UserInfo::getByID($u->uID);
      echo "mt('send', 'pageview',{email:'" . $ui->getUserEmail() . "', firstname: '" . $ui->getUserName() . "' } );";
		}
    else {
		echo "mt('send', 'pageview');";
	}
 ?>
</script>

その3. ユーザー領域にregister.phpを保存する

concrete5の特長でもありますが、/concrete/以下のコア領域にあるファイルを、/application/以下のユーザー領域に保存することで、コアファイルをオーバーライドして機能させることができます。

その為、先ほど編集したregister.phpを、 /application/single_pages/ 以下に保存します。

これで完了です。実際に登録動作確認をして、concrete5で登録したユーザーがMauticのコンタクトにも追加されていればOKです。

どのタイミングでコンタクト情報をPOSTしてCookieを紐付けるか?の設計はMA導入時の必須項目なんですが、登録完了画面がある場合なら特にAPI連携する必要もないのでラクですね。

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone