interpandaクイックスタート

interpandaを使えば、効果的にコンバージョンを増加させることが出来ます。
まずはフォームの代替としてのシナリオを作成、実際に設置してみましょう。

1. interpandaにログインする

発行されたID（メールアドレス）とパスワードで、下記のURLからinterpandaにログインします。

https://admin.interpanda.io/users/sign_in

2. 最初のシナリオを作る

interpandaでは、チャットやインタラクティブバナーで表示する一連の項目のまとまりを「シナリオ」と呼びます。
WEBサイトの一つのフォームのようなイメージです。

まずはフォームとほぼ同内容のものをinterpandaにで作成し、各ページにコンバージョンポイントを用意します。

今現在WEBサイトにあるフォームの項目を減らしinterpandaのシナリオを作成します。

今回は分岐無しの簡単なシナリオを作成します。

2-1. 項目の作成

interpanda管理画面にログインし、左側のメニューの[+]アイコンをクリックします。

次に「シナリオを追加」をクリックします。

シナリオの編集画面が表示されます。

まずはシナリオタイトルを入力します。
今回は、「興味カテゴリヒアリングシナリオ」とします。

また、「インタラクティブバナー」か、「チャット」のどちらかのUIを選択し保存します。
※全ての作成物において、「保存」をクリックするまで変更は保存されません。

今回はインタラクティブバナーを選択します。

仮に、すでにあるWEBサイトの問い合わせフォームの項目が、

• 氏名
• 会社名
• 部署名
• 役職
• メールアドレス
• 住所
• 電話番号
• お問合わせ項目（選択型）
• お問合わせ詳細（テキスト入力）

以上の9つだとします。

今回はinterpandaを使って気軽にクリックで問い合わせを獲得するため項目を減らし、また順番と内容も変更します。

興味のある内容をヒアリングし、メールで回答するといった内容にしてみます。

• お問合わせ項目（選択型）
• その他の場合の氏名
• 会社名
• メールアドレス
• 電話番号

以上の内容でシナリオを作成します。

まずはシナリオの編集画面で「[+]新規作成」をクリックします。

各項目の編集画面が表示されます。

ここに質問内容のテキストを入力し、フォームの種類を選択し保存します。

今回は、問い合わせフォームの内容を移すイメージで、サイト訪問者にはたらきかける内容を作成してみます。

テキストを入力し、フォームの種類は「選択肢」に設定します。

「必須項目」のチェックボックスをつけ、「選択肢を追加」ボタンをクリック、

• 製品について
• 納期について
• 活用事例
• その他

の項目を作ります。

「保存」をクリックします。

これで、一つ項目が追加されました。

次に、「その他」の場合の自由入力の項目を作ります。
再度「[+]新規作成」をクリックして、項目を追加します。
テキストを入力し、フォームの種類は「テキスト」に設定、必須項目のチェックボックスは入れずに保存します。

項目が２つになりました。

これを繰り返し、項目のセットを作成していきます。

フォームの種類は、以下のように設定します。

「氏名」：テキスト
「会社名」：テキスト
「電話番号」：電話番号
「メールアドレス」：メールアドレス

「メールアドレス」項目は、「コンバージョンポイントに設定」のチェックボックスをつけます。

最後に、挨拶の内容の項目を作成します。
フォームの種類は、「入力なし」に設定します。

下記の内容を最後に表示します。

1
2

ありがとうございました！
メールアドレスへご要望にあった情報をご提供させていただきます！

これでシナリオが完成しました。

次はバナーを作ります。

2-2. バナーの作成

各シナリオページ（今回は「興味カテゴリヒアリングシナリオ」）から、
左側の「項目の設定」の下にある「バナー」をクリックします。
「[+]バナー追加」ボタンをクリックし、新規作成します。

後でわかりやすくするため、バナーの名前を入力します。

今回は「白背景・緑枠バナー」としておきます。

HTMLとCSS、JavaScriptはカスタマイズ可能ですが、今回はこちらのテンプレートを使います。

これらをコピー・ペーストして使用します。

このテンプレートの場合、HTMLの「CLICK HERE」と、「ご興味に合わせて〜」の部分を編集するとテキストを変えることが出来ます。

※HTML編集欄に最初から記入されている <p><br></p>は削除して下さい。

1
2
3
4
5
6
7

<div class="interpanda-banner-container">
  <div><em class="interpanda-banner-item-close">&nbsp;</em>
      <p class="interpanda-banner">CLICK HERE<br>
        <span class="interpanda-banner-span">ご興味に合わせて情報を提供します！</span>
        </p>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

.interpanda-banner-container {
        position: fixed;
        width: auto;
        bottom: 32px;
        background-color: rgba(255, 255, 255, 0.8);
        right: 25px;
        display: inline-block;
        cursor: pointer;
        border: 1px solid #2a6385;
        border-radius: 7px;
        margin: 5px;
    }
.interpanda-banner {
        margin: 5px 0;
        padding: 3px;
        vertical-align: middle;
        font-size: 14px;
        font-weight: 600;
        font-family: ヒラギノ角ゴ;
        text-align: center;
        color: #FF6600;
    }
.interpanda-banner-span{
  font-size: 0.8em;
  color: #1b384f;
}
.interpanda-banner-container:hover{
    background-color: rgba(00, 153, 204, 0.4)
}
.interpanda-banner-item-close {
        position: absolute;
        right: -13px;
        top: -10px;
        width: 25px;
        height: 20px;
        cursor: pointer;
        outline: none;
        border: none;
        background: none;
    }
    .interpanda-banner-item-close:after {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 20px;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '';
    }

また、☓ボタンを押すとバナーが消えるJavaScriptコードもこちらのテンプレートを使用します。

1
2
3
4
5

$('.interpanda-banner-item-close').click(function(){
    $('.interpanda-banner-container').fadeOut('fast').queue(function() {
      this.remove();
    });
  });

上記をそれぞれペーストして、保存します。

保存するとプレビューが出来るようになります。

バナー編集画面の下部「プレビュー」ボタンをクリックします。

プレビュー画面で、実際にクリックして動かしながら見た目やシナリオの進み方等を確認します。

3. WEBサイトに実装する

プレビューで確認したバナーとシナリオに問題がなければ、WEBサイトに実装します。

バナー編集画面の一番下の「バナーの貼り付けコード」の右側のボタンをクリックし、コードをコピーして、WEBサイトの設置したいページのHTMLに貼り付けます。

<script src='https://app.interpanda.io/api/1.0/banner/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' charset='UTF-8'></script>

本番環境で確認する

WEBサイトに実装したバナーで、テストコンバージョンをしてみましょう。

サイト上に出現するinterpandaのバナーをクリックし、選択肢をクリック、入力して送信してみて下さい。

その後、interpandaの管理画面で左側メニューの人型のアイコンからプロスペクト一覧を確認し、コンバージョンを確認しましょう。