ぎょりの魚醤日記ʚ( ˙ ꒳ ˙ )ɞ

IT業界に生息している営業・マーケティングとかやってる人間です

Mautic on bitnamiで資料ダウンロードフォームを作ってみた

こんにちは。 忘年会シーズンで飲み続けているぎょり(@Nagafuchik)です。ぜひ東京駅、渋谷駅周辺の良い立ち飲み屋を教えてください。

この記事はサーバーワークス Advent Calendar 2016、18日目の記事です。

qiita.com

今流行の!Mauticを立ち上げてみたいと思いつつ、手を付けないまま時が過ぎすぎていたのでこの機会にやります。やってみた結果わからんことだらけだったのでぜひコメントをお待ちしています。

Mautic

言わずと知れた、無料で使えるMarketing Automationサービスです。MAのオープンソースソフトウェアはMauticだけだとかなんとか。

Mauticを使うには、サーバーを用意してMauticをインストールするだけ!でとても簡単です。AWSであればAMIも提供されていますし、Amazon EC2や最近出たAmazon Lightsailにインストールする、など様々な方法があります。サーバーを立ててインストールすることが難しい方には、Mauticがホスティング環境含めて「Mautic Cloud」というサービスを提供していますのでこちらがオススメです。制限はありますが、Freeプランもあるのでテストや小規模ユースにはこちらで十分かと思います。

mautic.com

bitnamiチャレンジ

Maucit環境を構築する様座な方法がある中、私は今回、まだ触ったことのないけど気になっていたbitnamiを使ってみたいとおもい、bitnami+EC2で構築しました。

bitnamiはさまざまなソフトウェアをすぐに立ち上げることができるサービスです。特にWordPressDrupalのようなCMSで使われていることが多いようです。ミドルウェアよくわかんな〜い、みたいなときに重宝します。サーバーサイドは今回私が試したAWSも使えますし、Google Cloud PlatformやAzureを使って作ることも可能です。使い方は自身が持っているアカウントと紐付ければ良いだけ。簡単です。 bitnami.com

では、細かい設定方法を記します。

bitnamiでmautic環境の構築

bitnamiのアカウントを作成し、 "mautic" と検索すると以下のページに進めます。 bitnami.com

「LAUNCH IN THE CLOUD」を選択すると、bitnamiで利用できるクラウドプラットフォームの選択画面が表示されます。ここで「Amazon Web Services」のアイコンをクリックします。 f:id:Nagafuchi:20161216181710p:plain

あら、びっくり。AWSのマネコンよりもずいぶんとわかりやすい画面が表示されます。使うAWSアカウントを選んだり、名前をつけたり、ディスク容量を選んだり、Regionを選んだりします。

さぁ、ココで気づいてしまいました。。。

何と...Instance Typeがm3.medium以上からしか選べない!!!t系がいない!!!

これは痛い..いたいけどもうココまできたら引き下がれなかったのでこのまま作っちゃいました。まぁ、テスト中であればstopすりゃええし。大丈夫大丈夫と言い聞かせてm3.mediumで構築しました。(※bitnamiのdocumentにそのあたりはちゃんと記載してあります。)

f:id:Nagafuchi:20161216182145p:plain

ポチポチしていって1分ぐらい待つとMautic環境が出来上がります!!簡単!! f:id:Nagafuchi:20161216182528p:plain

画面上の「GO TO APPLICATION」をクリックすれば、自分のMautic環境にアクセス出来ます。bitnamiから自動的に払い出される「CREDENTIALS」の情報を入力してMautic環境にログイン。 ログインできたらまずは設定。自身のユーザー名や言語を変更します。様々な言語に対応していてMauticのすごさを感じます。 f:id:Nagafuchi:20161217141404p:plain

Mauticには様々な機能があります(※詳しくはココが、とりあえず他との連携がなくても使える機能を試してみよう、ということで「フォームに必要情報を入力」させて資料をダウンロードするページを作ってみました。

フォーム生成と資料ダウンロードページの作成

ダウンロードアセットの設定

まず、ダウンロードさせる資料(アセット)を設定します。

コンポーネント > アセットをクリックし、右上の「+新規」ボタンからアセットを登録します。今回は自身の登壇資料をダウンロードさせることにして、PDFファイルをアップロードしてみました。

おや・・容量がでかすぎてアップロードできません。 f:id:Nagafuchi:20161217141728p:plain

これはエラーメッセージの通り、設定 > アセット設定 > 最大サイズ で変更可能です。(まぁでかいファイルをどんどんアップロードされちゃたまったもんじゃない)また、資料の形式も指定することができるのは便利です。 f:id:Nagafuchi:20161217142021p:plain

ファイルはMauticのローカル環境でも、外部ストレージ環境でも設定できるようです。今回はローカルに保存しました。(今度boxで試してみます。)

どのあたりで活用していけるかまだわかっていませんが、管理用にいるだろう、と思いカテゴリも設定しておきました。 f:id:Nagafuchi:20161217142316p:plain

これだけでアセットの設定は完了です。

フォームの作成

次に、資料ダウンロードのための情報を入力してもらうためのフォームを作成します。

コンポーネント > フォーム > +新規 と進むと以下のような画面が表示されます。おそらくフォームを生成する際にはキャンペーンと連携することがケースとしては多いでしょう。スタンドアローンを使うポイントについてdocumentにも書いてありましたが私は使うタイミングが思いつきませんでした。。。おしえてえらいひと! f:id:Nagafuchi:20161217142950p:plain

ということでキャンペーンフォームを作成します。

まずはフォームの基本を設定します。フォームの名称や、フォームに情報を入力した後のアクションを選択することができます。例えば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

f:id:Nagafuchi:20161217144355p:plain

次にフォームに入力してもらう項目、フィールドを生成します。フォームに入れてもらいたい情報をどんどんフィールドに追加していきます。 f:id:Nagafuchi:20161217143928p:plain

フォーム画面で表示させる項目名をテキストラベルに設定します。 f:id:Nagafuchi:20161217144036p:plain

その項目がどの値に紐づくか、をコンタクトフィールドで設定します。ちなみにテキストラベルとマッチさせるフィールドの項目名に類似のものを記載すると自動的にマッチフィールドを設定してくれます。日本語と英語だと難しいけど、フォームの項目自体を英語にしてしまうと余計な手間が省けて便利です。 f:id:Nagafuchi:20161217144115p:plain

次に、フォーム入力後に資料ダウンロードさせるアクションを設定します。フォーム生成画面の送信アクション > アセットダウンロード を選択します。 f:id:Nagafuchi:20161217145643p:plain

そんなこんなで出来上がると、自動的にフォーム用のhtmlを生成してくれます。 f:id:Nagafuchi:20161217145602p:plain

デザイン力のない私はほぼそのまま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とかクソアツな話をめちゃくちゃおもしろく語ってくれることでしょう。期待しかありません。

ではでは。