まだまだお店にとっては人気が根強いアメブロ。
アメブロをカスタマイズする方法はたくさん記事に書かれていますし、僕のブログでも触れてきました。
今回は、WEB制作会社として、
ちょっとした技術を導入するだけでこんなにも集客ツールになると言う部分に
できるだけわかりやすく触れて行きたいと思います。
フリープラグインを活用しよう
アメブロを便利に使うために欠かすことのできない機能の１つが、
「フリープラグイン」
多くのアメブロユーザーが、ここにはほとんど触れていないんじゃないかと思います。
「プラグインとかって・・なに？」
「プログラムはわからないし・・」
というあなたにも、この機能をつかうとこんなに便利に・・
というか、ほとんど魔改造になるということを、ご紹介します。
フリープラグインでできること
まずは、この便利な機能を使うと何ができるかということ。
という部分が大きいと思います。
一つ一つ、わかりやすくお伝えします。
ただし、アメブロの利用規約と、アメブロマナーとのバランスをとって活用してください。
通常のアクセス解析よりも、さらに詳しいアクセスを解析できる
アメブロのアクセス解析を見ることで、集客に役立つ色々な情報を得られます。
アメブロのアクセス解析では、以下の内容を見ることができます。
これらを知るだけでも、記事を格上で非常に便利なのですが、さらに詳しくお客様の情報を見る方法が、
Googleのアクセス解析を導入することです。
アメブロの解析よりも、正確な数値を見ることができる
こちらは、とある店舗のアクセス数です。
2014年12月は10,784 アクセスあるとされています。
パソコンからは、8000アクセス以上あります。
しかし、Googleのアクセス解析で同じブログを見たら、どうなるでしょう。
パソコンからは、396アクセス
全体のユーザー数は308人
かなり数値が減っています。
数値が、１３％程度になっています。
Googleアクセス解析では、スマートフォンは解析できていない
プラグインに入れた機能は、スマートフォンで見た時には反映されません。
なので、この数値の違いはスマートフォンでのアクセスが残りの８７％という見方もできますが、
それにしても、数値が違いすぎているように思います。
なぜなら、
アメブロでは「パソコンからのアクセスが８０００回以上あった」と言っているのですが、
Googleでは、「ちょっとまってよ ぅおにぃーさん！ 全体でも１４４９回でっせ！」と言っているのです。
出典：８.６秒バズーカー 「ラッスンゴレライ」
数値の違いについては、諸説あります。
アメブロを敵視するつもりはないので、アメブロのアクセス解析も重要なデータですが、
自分の手元でも解析をしておいた方が良いかもしれません。
そこで、Googleのアクセス解析「Google Analytics」の登場です。
アクセス解析の導入については、ここに書いてあります。
https://www.healing-solutions.jpblog/archives/139
記事の中にでてくる、アクセスを解析するタグ ＝ トラッキングコードを、
フリープラグインに設置してみます。
GoogleAnalyticsに、アメブロのアドレスを登録します
トラッキングコードは、
順番に設定していけば自動的に下のようなものが表示されるので、コピーをするだけです。
それを、アメブロの「フリープラグイン」にはりつけて保存します。
フリープラグインが、サイドメニューから外れている場合は意味が無いので、必ずサイドメニューに入れましょう。
そして、自分のアメブロを表示しなおして、GoogleAnalyticsに移動すると・・
すでに、解析が始まっています。
「現在のユーザー」というのは、今現在、この瞬間、ブログを見ている人の情報を見ることができます。
しかも、そのユーザーが、だいたい日本のどのあたりから見てくれているかもわかります。
※位置情報は正確ではないので、参考程度に！
簡単に導入できて、しかも通常のアメブロでは解析できない部分まで解析ができるので、
GoogleAnalyticsを入れておくと、何かと便利です。
また、Googleの推奨なので、SEO的にも邪魔をあまりせず、検索結果に影響を与えにくいのもポイントです。
時々、別のシステムの解析タグを見かけるのですが、ソースコードをかなり汚していて、
SEO的に不利になっているものも見かけるので・・・
お問い合せフォームを設置できる
アメブロの改造は、まだ終わりません。
禁断の「お問い合せフォームの設置」を行ってみます。
これは、アメブロの「外部サイトへの誘導」などに抵触する可能性があるので、自己責任でお願いします。
参照：「アメブロの利用規約を読み込んでみよう」
https://www.healing-solutions.jpblog/archives/872
また、設置するお問い合せフォームは、こちらの「メールフォームPro」を使うことにします。
参照：「サロンのお問い合せフォームに使えるツール」
https://www.healing-solutions.jpblog/archives/1368
メールフォームPro でお問い合せフォームを作るのに最も必要な３つの要素は
この３つを必ず記入しなければいけません。
また、アメブロにお問い合せフォームのプログラムを置いておくことができないので、
プログラム自体は、あなたのホームページがあるサーバーにおいておく必要があります。
FTPソフトを使って、自分のホームページにプログラムを入れる
ホームページを管理運営している人なら、「FTP」という言葉を聞いたことがあるかもしれません。
ホームページを入れておく箱に、接続するためのソフトです。
このソフトを使って、あなたのホームページの中に「mailform」というフォルダを作り、
その中にメールフォームProのプログラムを入れておきます。
例えば、こんな感じ
※セキュリティ対策などは自己責任でお願いします。
お問い合せフォームのサンプルコードです。
<link rel="stylesheet" href="設置したサーバーのアドレス/mailform/mfp.statics/mailformpro.css" type="text/css" /> <form id="mailformpro" action="設置したサーバーのアドレス/mailform/mailformpro/mailformpro.cgi" method="POST"> <div class="mfp_phase" summary="個人情報"> <div id="mailfield"> <dl class="mailform"> <input type="hidden" name="お名前" data-unjoin="姓+ +名+（+セイ+ +メイ+）" value="" /> <dt class="mfp"><span class="must">必須</span>お名前</dt> <dd class="mfp"> <input type="text" name="姓" data-kana="セイ" size="15" required="required" /> <input type="text" name="名" data-kana="メイ" size="15" required="required" /> </dd> <dt class="mfp">フリガナ</dt> <dd class="mfp"><input type="text" name="セイ" size="15" data-charcheck="kana" /> <input type="text" name="メイ" size="15" data-charcheck="kana" /></dd> <dt class="mfp"><span class="must">必須</span>メールアドレス</dt> <dd class="mfp"><input type="email" data-type="email" data-parent="mailfield" name="email" size="40" required="required" /></dd> <dt class="mfp"><span class="must">必須</span>確認のためもう一度</dt> <dd class="mfp"><input type="email" data-type="email" data-parent="mailfield" name="confirm_email" size="40" required="required" /></dd> </div> <div class="mfp_phase" summary="備考欄"> <dl class="mailform"> <dt class="mfp">備考欄</dt> <dd class="mfp"><textarea name="備考欄" rows="10" cols="60" data-max="2000"></textarea></dd> </dl> <div class="mfp_buttons"> <button type="reset">リセット</button> <button type="submit">送信する</button> </div> </div> </form> <script type="text/javascript" id="mfpjs" src="設置したサーバーのアドレス/mailform/mailformpro/mailformpro.cgi" charset="UTF-8"></script>
こんな感じのものを、「フリープラグイン」に追加してみます。
そして、アメブロを見てみると・・
「フリープラグイン」があるサイドバーに、そのまま表示されています。
送信ボタンを押すと、ちゃんとチェックを入れてくれています。
つまり、プログラムは動いています。
名前とかを入力して、送信してみます。
ちゃんと、送信確認が動いています。
送信ボタンを押すと、設定してある「お問い合せありがとうございました」ページに移動しました。
これで、アメブロにお問い合せフォームを設置できました。
見た目をかなり調整できる
ただ、サイドにあるままだと、かなり使いづらいと思うので、メインに持ってきちゃいましょう。
ここでも、「フリープラグイン」が役立ちます。
特定のIDがついた項目を、特定の場所に移動させる
というプログラムをアメブロで動かせます。
まずは、先ほどのメールフォームに、固有のIDをつけます。
IDは、 <div id=”hogehoge”> 内容 </div> で囲います。
まず、最初の部分
そして、最後の部分
注意としては、<script>とか書いてある所は、かならずIDの外に出すことです。
こうしないと、上手く処理できなくて動作しないです。
これで保存をすると、メールフォーム全体を hogehoge というIDで囲うことができます。
もちろん、hogehoge じゃなくても半角英数であれば、基本的には何でもいいです。
※ダメな文字もあるので、英語だけがベター
最後に、このIDは、ここに移動させるよーという指示を書きます。
たとえば、メッセージボードが空いているので、この中に移動させてみます。
メッセージボードの要素は、右クリックで、「要素の詳細」を見るとわかります。
ちょっと、文字が小さいですが、「skinMessageBoard」という枠で囲われているのがわかります。
その中に、さらに skinMessageBoard2 とか、 skinMessageBoard3 とかがあります。
しかもclass=”” と書かれているので、 .skinMessageBoard でその位置を特定できます。
ここでは、jQueryという方法を使います。
アメブロは以前はjQueryで動いていたんですが、今は外れているみたいなので、jQueryの読み込みが必要です。
しかし、シンプルな文字を記入するだけで、移動させられます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$ = jQuery
jQuery(function() {
jQuery('#hogehoge').insertAfter('.skinMessageBoard3');
});
</script>
これで何をしているかというと、
１．「GoogleさんのjQueryというプログラムを借りるよー」
２．「競合しないように、一応 $ マークは置き換えるよー」
３．「hogehogeのIDの中身を、メッセージボードの中に移動しよう」
なのです。
そうすれば、メッセージボードに移動できました。
ちゃんと、入力チェックも動いています。
もちろん、送信もでき、最終的には自分のホームページに誘導しています。
これで、アメブロにお問い合せフォームを設置できました。
ただし、アメブロの利用規約に違反する行為をすると、
即アカウント削除になる可能性があります。
このあたりは、くれぐれも自己責任でお願いします！！！
まとめ
アメブロは、いいのか悪いのか、やっぱり人気ですね。
改造をすることで色んな機能を盛り込んでいる人も多いです。
WEBの最近の動きを見ていると、
「キレイな見せ方をする （見た目重視）」という部分から、
「内容を重視する （コンテンツ重視）」という考え方に変わってきました。
そして今は、
「行動重視」になってきていると、肌で感じます。
特に、mixpanelを知ってからは、その傾向を強く感じるようになりました。
mixpanelは、Googleアクセス解析を、さらに狭く深く掘り下げたもの。
全体の動向を把握するには、GoogleAnalyticsが有利だと思いますが、
ユーザー単位の行動を把握するには、mixpanelのほうが優れています。
このあたりは、また別の機会に。
せっかくアメブロを書いているなら、ぜひ「フリープラグイン」に注目をして、
いろいろな機能を盛り込んでみてください。
※くれぐれも、アメブロの利用規約にのっとって、自己責任で！
