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よりダウンロードしてご利用ください。

記事公開日: 2017年02月08日

新規の取引先が信用できるかどうかを確認したい、というケー... 詳細はこちら

名古屋市中区新栄にあるコワーキングスペース学び舎mom(まな... 詳細はこちら