昨日の斎藤さんの「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 の同士、小野さんです。