どうも、まさとらん(@0310lan)です!



最近は、Webサービスやサイトなどを制作する際に、ページの解析やユーザー行動の分析、チャットによるサポート、メールの配信…など、いろいろやることが増えてきました。



そこで、今回ご紹介するWebサービスを活用して、さまざまな「解析作業」や「機能追加」をお手軽に一元管理してみませんか。



【 StackPile 】


HTMLファイルに、わずか1行のコードを追加するだけで、あとは専用の管理画面から多彩なWebサービスと簡単に連携することが出来るようになります。



必要が無くなったら、1クリックで「連携解除」も出来るので非常に便利ですよ!





使い方!

それでは、既存のWebページへ導入する手順を実際に使いながらご紹介しようと思います!





まずは、サイトにアクセスして「登録」ボタンをクリックします。






すると、登録フォームが表示されます。


ここで、「➀ユーザー名」「➁メールアドレス」「➂パスワード」を入力すればOK!(GitHubアカウントでも登録可能…)





次に、任意のプロジェクト名を入力します。


これにより、例えばWebサイト別に管理を分けたりすることが可能になります。





続いて、1行のコードが発行されるので、これをコピーします。






そして、WebページのHTMLファイル内にある「head要素」の最後に貼り付けます!






あとは、コードを貼り付けたWebサイトのURLを入力して「VERIFY」ボタンをクリックすることで、ちゃんと認識できているかを確認できます。


これで導入は完了です!





「Yes, let’s do it!」というリンクをクリックしてみましょう。



すると、管理画面が表示されて利用可能なWebサービスの一覧がチェックできます!


Webページの解析に特化したサービスや、チャット機能、エラーチェック、マーケティングサポート、ユーザー行動の分析…など、とても多彩なサービスと連携できるのが分かります。





Webサービスを連携してみよう!

それでは、試しにいくつかのWebサービスを連携してみたいと思います。





例えば、さまざまな「シェアボタン」を生成してWebページに埋め込むことが出来る「AddThis」を連携してみます。


(ユーザー登録は先に済ませておきましょう…)





「StackPile」の管理画面から、「AddThis」をクリックします。






あとは、自分の「AddThis」アカウントの「ID番号」を入力して「ENABLE」ボタンをクリックすれば準備完了というお手軽さ!






ちなみに、「ID番号」はAddThisの「General」ページに記載されているモノになります。(「ra-」は省略…)






たったこれだけの作業で、例えば以下のようなサンプルサイトで…






簡単に「シェアボタン」が表示されるわけです!






さらに、チャット機能を簡単に追加できる「Drift」も連携してみましょう!






こちらもID番号が必要なので、あらかじめDriftにて生成されたコードの中にある「ID」をコピーしておきます。






あとは、IDを貼り付けて同じように「ENABLE」ボタンをクリックするだけで完了です!






すると、ユーザーと対話可能な「チャット機能」が追加されているのが分かります。


(Driftについての詳細はコチラ!)





Webページの解析でお馴染みの「Googleアナリティクス」も、トラッキングIDを入力するだけで適用完了です!


このように、さまざまな便利サービスを必要なだけ連携できるうえ、ソースコードは一切変更しなくても良いのが大きな特徴と言えるでしょう。





ちなみに、連携した機能はクリック1発でいつでも「解除」可能です!


その他、便利なサービスたち!

「StackPile」は、まだ新しいサービスですが、連携できるWebサービスはすでに60種近く存在します。





いずれもWeb制作&運用を強力にサポートしてくれるサービスばかりで、例えばユーザーへの「メール配信」をサポートしてくれる【 Aboardly 】があります。


これは、「ユーザーが30日間ログインしてなかったら…」とか「ユーザー登録を済ませたら…」のように、独自のルール決めを簡単に作り、それに従って自動的にメールを配信してくれるようになります。





また、Web解析用に【 Crazy Egg 】も利用できます。


主に、「ユーザー行動」について分析できるサービスになっており、ユーザーがどのように画面をスクロールしているかや、クリックした箇所、ユーザー属性などをヒートマップ状に可視化できるようになります。





他にも、Webページで利用しているJavaScriptのエラー可視化サービスとして【 TrackJS 】があります。


いつ、どのようなエラーがどこで発生したのかをしっかりと記録してくれ、それによってどのようなユーザーに影響が出ているのかを自動で明確化してくれるサービスです。



早急な原因究明にも繋がるので、導入しておくと便利かと思います。



まだまだ優秀なサービスがたくさん存在しており、簡単に「A/Bテスト」を行うモノや、セキュリティを高めてくれるものなど、連携できるサービスを眺めているだけでも勉強になりますよ。





まとめ

最近は、特定の機能に特化したサービスが増えいていることもあり、便利な機能を持ったサービスをどんどん追加していると、いつの間にかソースコードが複雑化したり管理が大変になっていきます。



そういう意味でも「StackPile」を利用する意味は少なくないのではないでしょうか。



また、連携できるサービスは随時増えていくことになるので、今後の動向にもチェックしておきたいところ。



Webサービスやサイトを最小限のコードでパワーアップしたい方は、ぜひ一度トライしてみることをオススメ致します!





<参考>

「StackPile」公式サイト





written by まさとらん(@0310lan


情報提供元:
記事名:「 わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!