Mautic on bitnamiで資料ダウンロードフォームを作ってみた
こんにちは。 忘年会シーズンで飲み続けているぎょり(@Nagafuchik)です。ぜひ東京駅、渋谷駅周辺の良い立ち飲み屋を教えてください。
この記事はサーバーワークス Advent Calendar 2016、18日目の記事です。
今流行の!Mauticを立ち上げてみたいと思いつつ、手を付けないまま時が過ぎすぎていたのでこの機会にやります。やってみた結果わからんことだらけだったのでぜひコメントをお待ちしています。
Mautic
言わずと知れた、無料で使えるMarketing Automationサービスです。MAのオープンソースソフトウェアはMauticだけだとかなんとか。
Mauticを使うには、サーバーを用意してMauticをインストールするだけ!でとても簡単です。AWSであればAMIも提供されていますし、Amazon EC2や最近出たAmazon Lightsailにインストールする、など様々な方法があります。サーバーを立ててインストールすることが難しい方には、Mauticがホスティング環境含めて「Mautic Cloud」というサービスを提供していますのでこちらがオススメです。制限はありますが、Freeプランもあるのでテストや小規模ユースにはこちらで十分かと思います。
bitnamiチャレンジ
Maucit環境を構築する様座な方法がある中、私は今回、まだ触ったことのないけど気になっていたbitnamiを使ってみたいとおもい、bitnami+EC2で構築しました。
bitnamiはさまざまなソフトウェアをすぐに立ち上げることができるサービスです。特にWordPressやDrupalのようなCMSで使われていることが多いようです。ミドルウェアよくわかんな〜い、みたいなときに重宝します。サーバーサイドは今回私が試したAWSも使えますし、Google Cloud PlatformやAzureを使って作ることも可能です。使い方は自身が持っているアカウントと紐付ければ良いだけ。簡単です。 bitnami.com
では、細かい設定方法を記します。
bitnamiでmautic環境の構築
bitnamiのアカウントを作成し、 "mautic" と検索すると以下のページに進めます。 bitnami.com
「LAUNCH IN THE CLOUD」を選択すると、bitnamiで利用できるクラウドプラットフォームの選択画面が表示されます。ここで「Amazon Web Services」のアイコンをクリックします。
あら、びっくり。AWSのマネコンよりもずいぶんとわかりやすい画面が表示されます。使うAWSアカウントを選んだり、名前をつけたり、ディスク容量を選んだり、Regionを選んだりします。
さぁ、ココで気づいてしまいました。。。
何と...Instance Typeがm3.medium以上からしか選べない!!!t系がいない!!!
これは痛い..いたいけどもうココまできたら引き下がれなかったのでこのまま作っちゃいました。まぁ、テスト中であればstopすりゃええし。大丈夫大丈夫と言い聞かせてm3.mediumで構築しました。(※bitnamiのdocumentにそのあたりはちゃんと記載してあります。)
ポチポチしていって1分ぐらい待つとMautic環境が出来上がります!!簡単!!
画面上の「GO TO APPLICATION」をクリックすれば、自分のMautic環境にアクセス出来ます。bitnamiから自動的に払い出される「CREDENTIALS」の情報を入力してMautic環境にログイン。 ログインできたらまずは設定。自身のユーザー名や言語を変更します。様々な言語に対応していてMauticのすごさを感じます。
Mauticには様々な機能があります(※詳しくはココ)が、とりあえず他との連携がなくても使える機能を試してみよう、ということで「フォームに必要情報を入力」させて資料をダウンロードするページを作ってみました。
フォーム生成と資料ダウンロードページの作成
ダウンロードアセットの設定
まず、ダウンロードさせる資料(アセット)を設定します。
コンポーネント > アセットをクリックし、右上の「+新規」ボタンからアセットを登録します。今回は自身の登壇資料をダウンロードさせることにして、PDFファイルをアップロードしてみました。
おや・・容量がでかすぎてアップロードできません。
これはエラーメッセージの通り、設定 > アセット設定 > 最大サイズ で変更可能です。(まぁでかいファイルをどんどんアップロードされちゃたまったもんじゃない)また、資料の形式も指定することができるのは便利です。
ファイルはMauticのローカル環境でも、外部ストレージ環境でも設定できるようです。今回はローカルに保存しました。(今度boxで試してみます。)
どのあたりで活用していけるかまだわかっていませんが、管理用にいるだろう、と思いカテゴリも設定しておきました。
これだけでアセットの設定は完了です。
フォームの作成
次に、資料ダウンロードのための情報を入力してもらうためのフォームを作成します。
コンポーネント > フォーム > +新規 と進むと以下のような画面が表示されます。おそらくフォームを生成する際にはキャンペーンと連携することがケースとしては多いでしょう。スタンドアローンを使うポイントについてdocumentにも書いてありましたが私は使うタイミングが思いつきませんでした。。。おしえてえらいひと!
ということでキャンペーンフォームを作成します。
まずはフォームの基本を設定します。フォームの名称や、フォームに情報を入力した後のアクションを選択することができます。例えばThank youメッセージを表示させたいときには「メッセージを表示」を、自社の統一したThank youページや、ダウンロードアセットではない特定LPページに誘導したいときには「リダイレクトURL」を設定します。ここで自分のテストではわからなかったことがあります。このブログの後に続くのですが、ダウンロードアセットを指定したときにリダイレクトURLは有効になりませんでした。どうやったらダウンロードアセット > 特定URL等が指定できるのか、知りたいです。ご存知の方、教えてください。
※FacebookのMauticグループで質問したところapacheの設定を変更すると良いと教えていただき、Mautic on bitnamiでは以下にhttpd.confがありました。Headerあたりを修正してみたもののうまく行かず。まだ悩んでいます(12/24追記しました)
/opt/bitnami/apache2/conf/httpd.conf
次にフォームに入力してもらう項目、フィールドを生成します。フォームに入れてもらいたい情報をどんどんフィールドに追加していきます。
フォーム画面で表示させる項目名をテキストラベルに設定します。
その項目がどの値に紐づくか、をコンタクトフィールドで設定します。ちなみにテキストラベルとマッチさせるフィールドの項目名に類似のものを記載すると自動的にマッチフィールドを設定してくれます。日本語と英語だと難しいけど、フォームの項目自体を英語にしてしまうと余計な手間が省けて便利です。
次に、フォーム入力後に資料ダウンロードさせるアクションを設定します。フォーム生成画面の送信アクション > アセットダウンロード を選択します。
そんなこんなで出来上がると、自動的にフォーム用のhtmlを生成してくれます。
デザイン力のない私はほぼそのままhtmlをS3にぶち込み、できたフォームがこちら。
https://s3-ap-northeast-1.amazonaws.com/gyori/dev-mautic.html
ダウンロードできるファイルは大したものではありませんが、Mauticでキャッチできる機能確認のためにぜひぜひ嘘情報で良いのでフォーム送信テストのご協力をよろしくお願いします!! ※このフォームに入力いただいた情報を企業で流用することはありませぬ!!その証拠にこのMautic環境は12月末で削除します。
感想
いやーMA触りたいと思いつつ価格面と企業じゃないとなぁというのがMauticで解決できそうです。自身でも触って試して見れる。次は連携するところを試してみたいと思います。MAおもろい。もっと公開したいけど個人ブログだと公開しきれないのが難しいww
サーバーワークス Advent Calendar
明日はいよいよ @koba_taka の出番です。AlertLogicとかクソアツな話をめちゃくちゃおもしろく語ってくれることでしょう。期待しかありません。
ではでは。