Repro Web はヘッドレスCMS(違う) 

ポートフォリオサイトを作るにあたり、簡単なCMSを目指し、以前[スプレッドシートで静的サイトジェネレーター](https://qiita.com/boiyaa/items/aaab047f82b30c59c253)を作りました。

しかしいざポートフォリオサイトを作ろうとしても僕自体にコンテンツがないので、別のCMSを探求することにしました。

そこで目をつけたのが [Repro](https://repro.io/)

この記事では Repro で CMS するまでの工程を紹介します。

## Repro Web のインストールはとてもかんたん
- Repro に [Sign Up](https://app.repro.io/suppliers/sign_up) する
- こんな管理画面  
  <img width="400" alt="Screen Shot 2019-06-28 at 21.31.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/609c52bf-4b57-fc7d-3ba1-87d2fc8a6649.png">

- 設定 > アプリ設定 > SDK トークンを控える
- `index.html` に計測タグ設置

```html
<script>
    !function(o,e,n){var r=[];window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.0"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}(document,"script");
    reproio("setup", "YOUR_REPRO_SDK_TOKEN");
</script>
```

- アップロード
- 以上

これだけで、あとは Repro 側でコンテンツ書くだけでサイトができます。


## 記事投稿の方法

- 管理画面のマーケティング > メッセージを開く
- 画面テンプレートを選ぶ  
  <img width="500" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/a5129016-16eb-88b3-fa22-c9cc48fb82a0.png">
- 見出しと本文とボタンラベルを設定  
  <img width="600" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/4c36f4d2-c80a-53fd-c620-1c472574e596.png">
- 一旦プレビュー  
  <img width="400" alt="14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/355cdfa1-ed8b-f429-1332-97a2871cf37d.png">

これだと画面というよりダイアログっぽいですよね。
もしかすると、`メッセージを通知するのが本来の機能`なのかもしれません。
が、`オーバーレイ`と`閉じるボタン`のチェックをはずし、見出し・本文・ボタンラベルの文言を工夫するとこのように、
<img width="400" alt="21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/cb498375-9381-448c-f2f4-5252c9a4bac4.png">

画面感がでます。


## 複数の画面を作って画面遷移させる

ホーム画面とプロフィール画面を作ってみます。

### 画面遷移イベント定義
メッセージはイベントをトリガーに表示されるので、それぞれの画面URLで固有のイベントを発行することで、URLごとに異なる画面を表示します。

- 設定 > Web設定を開き、トラッキングルールを画面の数だけ設定  
  <img width="400" alt="41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/43114b8e-0478-ecd6-3743-2e47aa66d94a.png"><img width="400" alt="42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/763618e4-23e8-3526-ea7f-71c320f6918e.png">

- 設定 > イベント設定を開く  
  <img width="500" alt="44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/47905ec8-0dfa-5a2a-e07e-c0a4f8b60e42.png">
- この場合はプロフィール画面イベントが登録されていないので、一度サイトの /profile にアクセスして、イベントが登録されるまで待つ  
  <img width="500" alt="45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/068ca2e0-cbd8-5dfc-bd7b-128ca6026e1b.png">
- お好みでイベント名付ける  
  <img width="500" alt="46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/1034519f-12c1-856e-722d-00ba4a2cc02a.png">

- 以上


### ページ作るときのメッセージ以外の部分の肝
Repro が MA ツールなのであれば、配信期間や表示回数制限が必要でしょうが、CMSなので無限にします。

- 配信期間長く  
  <img width="300" alt="51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/bb673c3d-fad4-5e10-4524-9d32b65927f0.png">
- 表示回数制限無し  
  <img width="600" alt="52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/41948550-cbb0-db28-0e34-3386a7686e60.png">
- ページに合わせたイベントをトリガー  
  <img width="600" alt="53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/78c5fd85-5fa3-6eb5-b44c-4f78bf425a4e.png">
- 配信対象設定 -> 次へ

### 配信対象設定に悩む
これはWebサイトとしてももちろん全ユーザーを対象にしたいところですが、全ユーザーという選択肢はなくて、条件を組み合わせても実現できません。

もしかすると、`特定の属性を持ったユーザーや、特定のアクションをしたユーザーに対して誘導する施策としてメッセージを表示するのが本来の使い方`なのかもしれません。

ただ Repro は Local Storage や Cookie にセッションに関する情報を保存しているようだったので、 `index.html` の方で Local Storage と Cookie をクリアすることで常に初回セッションユーザー状態にしました。

Repro が MA ツールだとするとこれにより色んな施策を打てなくなりますが、CMSなので大丈夫です。

```html
<script>
    document.cookie = "rpr_event_last_tracked_at=; max-age=0";
    document.cookie = "rpr_is_first_session=; max-age=0";
    document.cookie = "rpr_opted_in=; max-age=0";
    document.cookie = "rpr_session_started_at=; max-age=0";
    document.cookie = "rpr_uid=; max-age=0";
    localStorage.clear();
    !function(o,e,n){var r=[];window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.0"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}(document,"script");
    reproio("setup", "1dc71106-e126-4eb0-b5fa-595c3d219a07");
</script>
```

これでWebサイトらしい物が作れました。
<img width="400" alt="Screen Shot 2019-06-28 at 17.32.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/8145582a-6f78-34e0-4cbd-528d47b41917.png"><img width="400" alt="Screen Shot 2019-06-28 at 17.31.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/59ba3a1e-e1ba-b737-de9f-4ab4752c9080.png">

## デザインをカスタムする
テンプレートはどれもスタイリッシュなのですが、ちょっと僕には分不相応です。
こういうのでいいのよ。
<img width="400" alt="Screen Shot 2019-06-28 at 17.22.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/70b854fe-09cc-bc8d-d95e-6d8dca0edcbe.png">


で、そんな方のために[カスタムメッセージ （ベータ版）](https://docs.repro.io/ja/dashboard/campaign/custom-message.html) という、HTMLをカスタマイズできる機能があります。

- 管理画面右下のチャットから[`カスタムメッセージ （ベータ版）`](https://docs.repro.io/ja/dashboard/campaign/custom-message.html) 機能を申し込む
- その際メッセージ数上限も増やしてもらう（デフォルトでは3メッセージ = 3画面までしか作れない）
  <img width="300" alt="Screen Shot 2019-06-28 at 17.10.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/7b35538e-b0af-95a9-3d70-70ed988a5bbe.png">
- 有効にしてもらうと、カスタムという選択肢があらわれ、自分でHTMLをかけるようになる  
  <img width="300" alt="Screen Shot 2019-06-22 at 17.22.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142668/204d6808-ed5d-8be0-a38e-cce7e6bc2350.png">


## 完成品
https://dont-use-repro-like-this.boiyaa.now.sh/

いやー Repro 、非常に便利なCMSですね！

しかも、使い方を変えれば、`「ユーザーの獲得」「アプリ・webの課題の発見」「定着率・課金率の改善」など、デジタルマーケティングの課題を総合的かつ効率的に解消するマーケティングプラットフォーム`にもなりますね！