concrete5上の任意のフォームをmauticと連携させるアドオン my_mitsu_mautic が公式サイトで公開されました。

concrete5上の任意のフォームをmauticと連携させるアドオン my_mitsu_mautic が公式サイトで公開されました。

開発の経緯

mautic(マーケティングオートメーションツール)には、フォーム機能があります。mauticのフォームをホームページに埋め込めば、mauticで管理するのは楽です。

しかし、自作のフォームの場合はどうでしょうか。弊社でマイ見積の開発を始めたとき、mauticと連携するための簡便な方法はありませんでした。ないのであれば作ってしまおう、ということで、開発を始めました。

PHPではなくjQueryで

当初は、PHPを使って、サーバー側で処理する方法を考えました。フォームの送信ボタンが押されたときの処理に、mautic連携のコードを追加すればよいので、実装もそれほど難しくありません。

しかし、この方法だと、フォームのコード(コントローラのコード)を書き換えることになります。自分で作ったフォームなら良いですが、そうでない場合は、少し面倒です。また、フォームごとに、コードの書き方が異なる可能性がある点なども面倒です。

ここで、フロント側に目を向けてみました。フォームによってサーバー側の処理は異なりますが、HTMLの表示に関して言えば、かなり似ています。もちろんスタイルやレイアウトは異なるのですが、「htmlで枠が作られていて、データを入力する」という部分はほとんど一緒です。ここに着目すると、どんなフォームでも連携できるのではないか、と考えました。

実際に、concrete5.7系の標準フォームブロックで試してみると、

$(function() {
    $('.btn-primary').click(function (e) {
        var imgsrc = 'https://my-mitsu.mautic.net' + '/mtracking.gif?page_url=' + encodeURIComponent(window.location.href);
        var imgsrc = imgsrc + encodeURIComponent('#sent');
        var firstname = $('#Question7').val();
        var imgsrc = imgsrc + '&firstname=' + encodeURIComponent(firstname);
        var mail = $('#Question8').val();
        var imgsrc = imgsrc + '&email=' + encodeURIComponent(mail);
        var mauticimg = $('<img id="mauticimg">');
        mauticimg.attr('src', imgsrc);
        mauticimg.attr("width", 1).attr("height", 1).css("display", "none");
        mauticimg.appendTo('body');
    });
})

このようなコードで、mauticに情報を送ることができます。

concrete5のブロックにする

concrete5に実装するときは、「jQueryを出力するブロック」を作成することにしました。mauticと連携したいフォームの項目のID/classを設定して、そのID/classのデータをmauticに渡すjQueryを生成します。

.btn-primary
https://my-mitsu.mautic.net
#Querstion7

などをブロック編集画面で入力できるようにしました。

ver.8系にも対応

concrete5のバージョン8系にも対応しています。5.7系用に作って、ブロック自体は動作したのですが、ver.8系のフォームでは、IDがakID[12]のように、角括弧を使用することがあるらしいので、角括弧も設定できるようにバリデーションとjQueryコード生成部分のエスケープ処理を変更しました。

スキルレベルはExpert

このアドオンは、concrete5を使ったことがあることはもちろんですが、htmlのID/class、mauticの知識が前提となります。このためスキルレベルはExpert(上級者向け)となります。インストールしたコンクリートファイブの管理画面ではダウンロードできません。お手数ですがconcrete5.orgよりダウンロードしてご利用ください。

カテゴリー
関連するブログ記事
レスキューワーク株式会社の運営する見積書作成サービス「マイ見積」は、concrete5をベースに構築されています。concrete5をより良くするために活動されている方の支援の一環として、concrete5のテーマ・アドオンを公開されている方に、マイ見積スタンダードプラン1年間分の利用権をプレゼントいたします。通常は16,800円(+消費税)かかるプランです。
レスキューワーク株式会社では、新春お年玉企画として、「concrete5 アドオンのレビューをブログ等に公開した方全員に、アドオンを一個プレゼント」を行います。複数個レビューされた場合は、レビュー一個につき、アドオンを一個プレゼントします。
画像をドラッグドロップするだけで画像挿入できます。
ホームページ作成ソフトウェアconcrete5のログイン認証方法を、ユーザー毎にデフォルト設定を変えるアドオンAuthentication Type per User。 NPO法人のホームページには無償提供いたします。
アクセシブルなconcrete5テーマflowerを使ってみました。日本人作成のテーマです。公式ディレクトリで入手できるテーマで、日本人作成のものは少ないですから、試してみることにしました。
記事公開日: 2017年02月08日