わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
どうも、まさとらん(@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)