Mautic と concrete5 の良い関係 〜 ユーザー情報連携のススメ

Katz Ueno
Katz Ueno

昨日の斎藤さんの「Mauticで指定のIPアドレスからデバックツールバーを表示する」の記事から引き続き、 Mautic Advent Calendar 8日目を担当します。コンクリートファイブジャパン株式会社の Katz です。

普段は名古屋常駐で、Mautic Meetup Nagoya を主催しています。

Mautic が他の MA ツールに比べて優れていることの一つに、オープンソースとしてソースコードが公開されているということです。

同じく concrete5 もオープンソース CMS としてソースコードが公開され、自由にカスタマイズすることが出来ます。

また concrete5 は、2003年からエンタープライズ CMS として開発されて、歴史ある CMS として、標準機能が抱負に備わっており、Mautic との連携をより簡単に行うことが出来るのが魅力。

今回は、その可能性とサンプルプログラムを紹介します。

 

属性機能を使いこなそう

まず、属性機能。

concrete5 では、属性機能が標準装備され、属性の管理も標準機能として、管理画面から簡単に追加・編集・削除が行なえます。

ユーザー属性は自由に設計できますので、Mautic のコンタクトと連携するように設計が可能です。

ページ属性も自由に設計でき、ブロックやテンプレートで Mautic のタグを出力できるようにすると、コンタクトのタグ付けと連動させることが可能になります。

また Mautic のアセット機能に不十分であれば、concrete5 のファイルマネージャー機能を使って、アセットの管理を行うことも可能です。

いろいろ可能性がある concrete5 との CMS 連携の可能性をケーススタディーとして紹介します。

 

基本: Javascript のトラッキングコートを使う

今回の解説では、 主に concrete5 から、Mautic のトラッキングコード JS に情報を引き渡して Mautic 側で活用するというケースを中心に解説します。

トラッキングコードの詳しくは Mautic 公式ドキュメント、 Contact Tracking (日本語) を御覧ください。

 

Mautic の基本的な Javascript はこちらになります。​

<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】/mtc.js','mt');
    mt('send', 'pageview');
</script>

 

こちらの

mt('send', 'pageview');

という部分を拡張することで concrete5 から Mautic に値を渡すことが出来ます。

 

下記のように、 Javascript の中に Mautic のコンタクトハンドルとその情報を出力するようにします。

mt('send', 'pageview', 
    {【Mauticコンタクトのハンドル1】: '内容1',
     【Mauticコンタクトのハンドル2】: '内容2',
    }
);

それでは、具体的にどのようなことができるのかを解説します。

※カスタマイズした mt('send', 'pageview'); を送るページに、通常のトラッキングを入れるとアクセスが2重に送信される場合があります。現在、Mautic の concrete5 アドオンに機能要望として「Mautic のトラッキングを除く (exclude_mautic_tracking)」というチェック属性をオンにしたページには出力しないなどのリクエストを送っています。

 

ユーザー登録完了時に Mautic にユーザー情報を送る

concrete5 には標準でユーザー登録機能が備わっています。

ユーザー登録が完了した際、ユーザー登録時に登録された情報を飛ばすようにします。

Mautic Nagoya Meetup 2017年7月の勉強会で紹介した方法です。

詳細は、Mautic Meetup Nagoya コアメンバーの小野さんに解説記事を書いてもらったので、簡単な解説を行います。

  • Mautic でコンタクトの属性を設定
    • concrete5 と連携するコンタクトの項目を決定
    • 各項目の「パブリックに更新可」が「はい」であることを確認
    • 連携したいハンドルをメモ
  • concrete5 でユーザー登録する際にユーザーに登録してもらう属性情報を登録する(例: メールアドレス、名前、住所等)
    • Mautic のコアフィールドとできるだけ同期できるようマッチした項目を作成
    • ただ、ユーザー登録の離脱を防ぐために必須項目をシンプルにしましょう。
  • concrete5 でユーザー登録機能をオンに
    • 必要に応じてユーザー登録画面をカスタマイズ
  • concrete5 ユーザー登録完了画面のカスタマイズ
    • 小野さんの解説記事を元に、ユーザー登録完了画面で Mautic のコードを出力できるようカスタマイズ

以上で、concrete5 のユーザー登録時、情報を登録することが可能です。

 

concrete5 訪問時、常に登録情報を出力する

既に concrete5 サイトを構築し、ユーザー登録も行っているサイトであれば、ユーザー登録時画面はありません。

そのため、ユーザーが再び訪問し、ログインした際に、トラッキングコードを出力できるようにする方法もあります。

下記は、concrete5 のテーマのヘッダーやフッター部分に埋込、トラッキングコードとしては使わないようにするサンプルコートです。

Gist 上でも公開しています。19行目のMautic の URL と、23行目からの Mautic の属性ハンドルと concrete5 の属性ハンドルを対になるように記述してください。

 

checkLogin()) {
    $mtTags = array();
    $attributeSettings = explode(PHP_EOL, $attributeSettings);
    if (is_array($attributeSettings)) {
        foreach ($attributeSettings as $i => $attributeSetting) {
            $path_array = explode(',', $attributeSetting);
            $mtTags[$i]['mautic'] = trim($path_array[0]);
            $mtTags[$i]['concrete5'] = trim($path_array[1]);
        }
    }
    $ui = UserInfo::getByID($u->uID);
    $mtTag = array('email' => $ui->getUserEmail()); // まず concrete5 のユーザーのメールアドレスを登録
    if(is_array($mtTags)) {
        foreach ($mtTags as $mtTagsItem) {
            $mtTag = array_merge($mtTag, 
                                    array(
                                        $mtTagsItem['mautic'] => $ui->getAttribute($mtTagsItem['concrete5'])
                                    )
                                );
        }
    }
    $mtTag = json_encode($mtTag, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE);
}
if(!$c->getAttribute('exclude_mautic_tracking')) {
?>
    

時間があればパッケージとして登録するか、Mautic の公式 concrete5 ブロックに登録してみようかと考えています。

 

メールフォーム送信時に情報を Mautic に送る

Mautic のフォームは一通りの機能を備えているのですが、確認画面がないのは厳しいところ。

concrete5 でも確認画面付きのアドオンは GitHub 上では suiton_confirm_form_pack がありますし、コンクリートファイブジャパン株式会社でもアドオンを制作・販売しています。(マーケットプレイスでの一般向けの販売はまだしていません。)

Mautic ではなく concrete5 のメールフォームを使うべき時は下記の場合かと思います。

  • 確認画面がほしい
  • ファイルをアップロードして欲しい
  • 複数ページ表示などの複雑な動きが欲しい

concrete5 では、上記のコードをフォームの確認画面で表示するというカスタマイズを加えて、 cocnrete5 上でのメールフォームの入力項目を Mautic に出力することも可能です。

 

確認画面や送信完了画面に上記のコードをカスタマイズしたものを入れ、フォームを送信することが出来ます。

 

以上、CMS と Mautic をうまく組み合わあせて、得意なところを得意なツールを活用していきましょう。

明日の Mautic Advent Calendar 2016 は Meetup Nagoya の同士、小野さんです。