あなたのサイトの訪問者の行動が全てわかる、無料で簡単に使えるアクセス解析

正しいメールアドレスをご入力ください

利用規約に同意した上で登録してください

close

会員登録が完了しました

入力いただいたメールアドレスにPtengine本登録に関する確認メールが届きます。

【メールが届かない場合】

お問い合わせ(support@ptmind.co.jp)

ブログの効果を無料で最大化するグロースハックツールSumoMe

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Untitled design -10-

こんにちは。マーケティング部の繋です。

Ptengine Blogでは自分たちで利用していたり、
良さそうなサービスを定期的に紹介しています。

これまでは専門的な知識や高度なスキルが必要とされていた作業も
最近では誰でも、簡単に使用できるような
非常に便利なツールが多くリリースされています。

その中でも今回はこのPtengine Blogで利用している
ツールの中のひとつ「SumoMe」を紹介します。

SumoMeとは?

934F2363-37B1-4D6D-978E-037E38A279D2

 icon-external-link SumoMe

SumoMeはサイト訪問者に対し様々なアクションをタグを
設置するだけで簡単に可能にするツールです。

無料から利用でき、メルマガ購読フォームや追尾型シェアボタン表示など
デザイン面も評価できタグさえ設置できれば誰でも簡単に使用できます。

8C55F8C4-A13C-45D3-8A14-B7F8EF3EFFFB

代表的なものは上記のようなスクロールに追尾する形のシェアボタンや、
下記のようなメールマガジンの購読フォームなどがあります。

789CAC3D-7B8C-4813-8148-E22571F2ACB7

SumoMeをつかってみよう

それではさっそくSumoMeをつかってみましょう。
今回は登録方法や設定、実際の利用シーンまで紹介します。

利用前の準備

アカウント登録

トップページの「TRY IT NOW」をクリックして、メールアドレスを入力し登録をおこないます。

934F2363-37B1-4D6D-978E-037E38A279D2

メールアドレスを入力すると、その場でタグが発行されます。

9CDE3A11-1D0A-4007-B5E0-EAC51C6880D5

タグの設置

登録時に発行されたタグをコピーし設置したいWebサイトの
<head>内に設置します。

WordPressの場合はダッシュボード>外観>テーマの編集>ヘッダー(header.php)内の
下記の図の位置にタグを設置します。

C6DAEA9F-0679-4DCA-89E9-50FD2A301727

この操作だけで使用可能になります。
早い人ならここまで1分程度で完了できます。

機能の設定

管理画面へのログイン

タグの設置が完了するとWebサイト上に少し分かりづらいですが
下図のような青いバーが表示されます。

47B962D1-E71E-4358-9993-16075B2E316C

青いバー上にマウスオーバーすることでSumoMeのロゴが
表示されるのでクリックします。

管理画面の表示は今後、このバーをクリックする事でログインします。

また1度ログインするとキャッシュのクリアなどを行わない限り
ログイン状態が継続されます。

F44771C9-8100-4CBE-8F75-73E3B56395DF

ロゴをクリックするとSumoMeへのログイン画面が表示されます。
登録したメールアドレスを入力し、任意のパスワードを設定しログインを行います。

0C58EF26-D8ED-4613-ACBD-6CDD4F98F61A

設定項目の確認

ログインが完了すると、下記の画面が表示されるので
まずはSettingをクリックします。

※List Builderは初期状態の場合、表示されていません。

7C1A4916-540E-4A5B-9025-47C7A4A3EE26

Settingを開くと設定項目が表示されます。

3C7FEEEA-C6BC-4801-B915-CB01EE44F63B

  • Account:詳細情報の入力
  • Badge:バーの位置の設定
  • Users:管理者を追加できます(有料のPRO版のみ使用可能)
  • About:SumoMeの概要

設定自体は任意ですがアカウントの内容のみは入力しておきましょう。

SumoMeを使ってできること

SumoMe Storeで機能の確認

それでは各機能を追加していきます。
Sumo Storeをクリックします。

Sumo StoreはSumoMeで使用する個々の機能を追加する設定を行います。
使いたい機能だけをピックアップして使用できるのも特徴です。

EABE30AC-446E-4A69-874F-9622D2B42689

Storeに入ると左側にBrowse、Billingなどの表示がありますが
無料での利用の場合はBrowseのみしか使用しません。

2F012C4C-5232-4452-9BB1-0F9BF13CD71A

使用できる機能は、簡単に説明しますと

  • Email:メールマガジン購読を促すポップアップの表示
  • Sharing:追尾型のシェアボタンの表示
  • Analytics:簡易的なアクセス解析やヒートマップ機能
  • Communicate:コンタクトフォームのポップアップの表示
  • Upgrades & Services:有料で使用できる機能一覧

これだけの機能が無料で使用できます。

今回はメールマガジン購読フォームの表示とシェアボタン表示の
詳細な設定方法などを紹介します。

メールマガジン購読フォームのポップアップ表示

メールマガジンの購読を促すポップアップ表示の設定から行います。

DB353D7D-EC28-477F-8B58-82A1EFC08206

メールマガジンのポップアップ表示方法が3種類用意されています。

List Builder

ポップアップ表示の内容などを自由にカスタマイズすることができます。

69CC4B18-5B34-4597-ACB4-D0B8F54718B8

MailChimpなどの外部ツールとのリストの連携も可能です。

8956915A-50CB-45CA-90B2-D6B2E5BD7EBE

下記のように画像を挿入したポップアップも作成可能です。

D1304B4B-E2C5-41EE-8519-934161307237

Scroll Box

ページの右下などに表示させる追尾型のフォームです。

4E9D3F38-0FBA-4252-B730-1359B799D279

下記のようにページの右下に表示させる事ができます。

458F969F-457B-4725-95D8-0284EFF215CB

Smart Bar

あまり主張しないようなシンプルなフォームの表示ができます。

940928EB-D4A4-4615-85D4-F78C7B5C12E3

下記のようにサイトの上部にフォームを表示できます。

E20EB4C7-E346-4F04-8747-4B2B4C69F581

またメールマガジンだけでなくTwitterのフォロー促進などでも使用できます。

E22681C2-6505-4858-9058-EECF52ED3956

今回はList Builderを使用していきます。

List Builderの設定

使用したいフォームの種類を選択し「FREE」のボタンをクリックすることで
List BuilderをSumoMeの機能に追加することができます。

※下記では既に導入済みのためOPENの表示となっています。

6CEB12A7-7E1F-4A55-BFCF-29E64A156FFB

List Builderの画面に入ります。

下記はList Builderを開くと表示される初期の画面です。
統計のデータが表示されます。

それぞれのボタンの役割を説明します。

2AAC6D45-4F2F-4341-BDE9-99BCC3DD6EEF

無料でも多くの機能を使用できます。
サイドバーにある「Design」をクリックします。

既に表示された方もいらっしゃるかもしれませんが、
下記のようなデザインの詳細な設定が行えます。

D7854FD6-2857-4ED8-A1AA-52A133E6C23B

表示させる文言やフォントやボタンの色まで細かく設定できます。
見た目のデザインもかなり良いので、無料で使えるのは本当に嬉しいです。

フォームのプレビュー画面の上部に表示されている「success」をクリックすると
ボタンをクリックした後に表示させるポップアップも下記のように編集可能です。

75BB5677-014B-47F4-9B14-181978D88AF7

あとはリダイレクトさせるリンクの指定などを行えば、設定は完了です。
英語が苦手な方でも、上記の方法を見て設定すれば迷うことはないとおもいます。

設定完了すると下記のように表示されます。
またフォームに入力してくれた方のリストはSumoMe内で管理することもできますし
MailChimpなどのリストに同期する事もできます。

DE455581-410D-4962-9DF2-7D0CCBFD6D17

ソーシャルシェアボタンの設定

メルマガ購読フォームの続いてソーシャルシェアのボタンを設置します。

WordPressなどではプラグインやCSSを編集する事で設置できますが
SumoMeを使えば更に簡単に設置できます。

シェアボタンもSumo Storeから追加します。
こちらも3種類用意されています。

B3BF30AE-94D8-4102-874C-497D1DAF99B9

Share

追尾型のソーシャルシェアが可能なボタンを表示させる事ができます。

C0EFF9C5-7E59-4B01-ABCA-5D38A61C09A7

表示位置もある程度カスタマイズ可能です。

B73BBAA6-0B55-4808-B074-1CB8CEB42AB4

Image Sharer

カスタマイズできるシェア画像をポップアップさせる事ができます。

45AEB959-94C4-4795-88BD-2F1B343E67D2

その場でツイート内容をプレビューしながらシェアできるポップアップを表示する事も可能です。

ACC73DCD-137D-4042-96E4-D2DBAC0F2531

Highlighter

ブログなどの本文中の文章をハイライトした部分のみをシェアする事ができます。

CAAE56C5-5498-47DE-8FD6-BECEB7451CC4

重要なキーワードなどシェアする際、別タブでFacebookなどを
開きコピペしする手間が省けます。

5F23652E-B6DF-480B-974E-6EE653CF5081

今回はスタンダードな追尾型シェタボタンのShareを設置していきます。

Shareの設定

使用したいシェアボタンの種類を選択し「FREE」をクリックする事で
ShareをSumoMeの機能に追加する事ができます。

追加後は「OPEN」をクリックします。

FCFB596C-0101-4196-B55F-93486E71DB26

下記はShare開いた際に表示される初期画面です。
シェアされた数値など統計のデータが表示されます。

またそれぞれのボタンの役割を説明します。

B1D42A46-0027-4933-84F3-31420340224C

こちらもメルマガ購読フォームと同様に申し分ない機能が
無料で利用することができます。

早速設定を行うため「Setting」をクリックします。

A4F32DF5-4B14-47F7-9961-FEB34E6F3C29

表示させたいサービス候補の中から表示させたいサービスを選び
表示させるボタンの方にドラッグする事で表示サービスを変更できます。

海外のツールなので、はてブボタンなどはありませんがLINEはあります。
下部ではボタンの形や大きさ、背景色なども詳細に設定できます。

5B547830-24E3-4677-A805-72DFB7F78133

表示位置の設定も非常に簡単に行えます。
表示させたい位置を選びクリックするだけ。簡単ですね!

F42F4201-B159-48A3-9667-F8C228344D1C

基本的にこの2つの設定を行えば下記のように表示されます。

95485AA5-E442-4F73-A7D9-48064E776A42

いちいちCSSなどを編集せずに、簡単に設定の変更などが行えるので
このブログでも非常に重宝しています。

おわりに

いかがでしたか?
今回はPtengine Blogで実際に使用しているツールのSumoMeを紹介しました。

このブログではメルマガの購読はMailChimpと連携させてリスト管理を行っています。

こちらから登録されたメールアドレスは自動的にメール配信システムの
Mailchimpの配信リストに登録されるようになっています。
そちらの仕組みもこのツールには入っているので、面倒な作業が一切ありません!

気になる点は特に見当たらないくらい素晴らしいツールですが、
個人的な要望としてはシェアボタンのアイコンの種類が
もう少し豊富にあればA/Bテスト的な事もできると思いました。

今後のアップデートを期待しましょう!

無料でほとんどの機能を利用できるので、自社ブログやサイトなどで
是非試してみてはいかがでしょうか?

SumoMe以外にも様々なツールがあるので、今後も紹介していきます!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSで最新情報をうけとる

コメント

Comments are closed.