# Brightcove Player Import Integration

[Brightcove](https://www.brightcove.com/en/)は、デジタルメディアのクラウドベースの公開と配信を可能にします。Treasure DataをBrightcoveと組み合わせて使用することで、デジタルメディアイベントやメディアアクセスと使用に関する生データを保存できます。

ブラウザでビデオイベントが発生するたびにTreasure Dataに通知されるようにコネクタを作成できます。Treasure Dataはデータを保存し、SQLを介してデータを分析できるようにします。

# Playerの設定

1. Brightcoveの**Admin**コンソールを開きます。
2. **Appメニュー**を選択します。
3. **Players**を選択します。
Playerは、Treasure Dataにデータを供給するオブジェクトです。
![](/assets/image-20191010-225535.60431fa6059a93d8f7361f00ff65819872cb9d07578aa4f43da38c7d9c747467.c7eb690e.png)
4. **Players**セクションで**New Player**または既存のPlayerを選択します。
![](/assets/image-20191010-225611.9ae867d232b72bc338e0aee1cb2b368585a4c666fa95361e7be93e7a5dd63ce7.c7eb690e.png)
5. **Player Information**セクションで**Plugins**を選択します。
![](/assets/image-20200121-165711.a88625712cfbc55ae6586d9a84ebceb838eba4d3a0bedb52d36d40db33991370.c7eb690e.png)
6. **Add a Plugin**を選択し、**Custom Plugin**を選択します。
![](/assets/image-20191010-225833.d1cb9ee7aee190de4b4d88705b7dfcaffcae7b0daf713643e5f0bd2b1ffce8e7.c7eb690e.png)
7. Javascript URLセクションでは、次の例に示すように、BrightcoveプレーヤーからTreasure Dataにデータをインポートするために使用されるプラグインライブラリを指定する必要があります。
**Plugin Name**
`td`
**JavaScript URL**
`https://cdn.treasuredata.com/videojs/0.6.0/videojs-plugin-td.min.js`
**Options (JSON)**

```json
{
 "writeKey": "YOUR_API_KEY",
 "database": "DATABASE_NAME",
 "table": "TABLE_NAME",
 "host": "in.treasuredata.com",
 "trackCrossDomain": true,
 "startInSignedMode": true,
 "useServerSideCookie": true,
 "sscDomain": "YOUR_SSC_DOMAIN",
 "sscServer": "YOUR_SSC_SERVER"
}
```
![](/assets/image-20200714-153737.477f79a1f2f26e0f6945c62442d6fe7c12bd328e3f04b6e23099e3b47d20c4f1.c7eb690e.png)
8. **Options**セクションで、以下のパラメータを指定します。


|  |  | **Key Name** | **require** | **default** | **Ref.** |
| --- | --- | --- | --- |
| writeKey | ◯ |  |  |
| database | ◯ |  |  |
| table | ◯ |  |  |
| host |  | [in.treasuredata.com](http://in.treasuredata.com) | [Sites and Endpoints](https://api-docs.treasuredata.com/en/overview/aboutendpoints/#treasure-data-sites-and-baseurls)ページのJS/Mobile SDK/Postback |
| trackCrossDomain |  | false |  |
| startInSignedMode |  | false |  |
| useServerSideCookie |  | false | 参照: [Server Side Cookie](https://docs.treasuredata.com/smart/project-product-documentation/tracking-server-side-first-party-cookies-on-your-website) |
| sscDomain |  | (null) |
| sscServer |  | (null) |

### **Treasure Data SDK**

1. プラグインライブラリに加えて、**Scripts**タブでTreasure Data SDKライブラリを指定する必要があります。
**Scripts**タブにTreasure Data SDKライブラリを入力する際、`v2.2.0`または`v1.9.2`を使用できます。**Treasure Data SDK Library v2.2.0**

```
https://cdn.treasuredata.com/videojs/sdk/2.2.0-for-videojs.js
```
また、古いバージョンもサポートしています。必要に応じてそのバージョンも使用できます。
**Treasure Data SDK Library v1.9.2**

```
https://cdn.treasuredata.com/videojs/sdk/1.9.2-for-videojs.js
```
![](/assets/image-20200122-180334.ec8dbf6ee8da11f1afa43314456fc9057324213c2fd3b00055cd2763c4619770.c7eb690e.png)
2. 設定を保存した後、**Publish & Embed**を選択します。
![](/assets/image-20191010-230138.1934a51e7b907ff0699d11a6a466bfb3478af2936894e9ef77970799c8b1130a.c7eb690e.png)
3. **Publish Changes**を選択します。
![](/assets/image-20191010-230219.5b77677ed6812487a72984d3a8b106a71d8b3c44675d61287f2d3460a2261aae.c7eb690e.png)


# メディアコードの取得

Playerの設定が完了したら、メディアコードを取得できます。

1. Brightcove管理コンソールで、**Appメニュー**を選択し、**Media**を選択します。
![](/assets/image-20191010-230302.e33b2753d15d01be0aba8c1c8fa838551352c651b836332855bd678d3b4804af.c7eb690e.png)
2. Playerで使用したいビデオを選択します。
![](/assets/image-20191010-230412.00dc4b0aff2789800429115c879fd489c048c3b4dfff40da6f3cd8d26bdc80a1.c7eb690e.png)
3. **Publish** > **Web Player**を選択します。
![](/assets/image-20191010-230444.5bd7e90f82190f9e92485514fafdcbc7d4efd0a7b6f79cd8802c00336325ee0f.c7eb690e.png)
4. プラグインと連携するように設定されたPlayerを選択します。
![](/assets/image-20191010-230526.bcef1b4c46d9449b0e7ac9561be793e193694a00f7791650ae4076962804599d.c7eb690e.png)
5. コード領域からコードをコピーし、このコードをWebページに埋め込みます。
![](/assets/image-20191010-230558.5bdc8ef352e9cfa20231c3da57c004d506bcbefc58decc8d9a8ed0d37d84e01c.c7eb690e.png)
6. コードをWebページに埋め込み、Playerとのやり取り（再生、シークなど）を行うことで、データインポートを確認できます。


# Treasure Dataでのインポートの確認

Treasure Dataでは、Brightcove Playerから送信されるイベントを追跡するクエリを作成できます。通常、イベントがTD Consoleに表示されるまでに3〜5分かかります。

![](/assets/image-20191010-230707.5e4f2959241044fc385b7f5ba443421082f72a0ba3b40ce621a67e625087f8ad.c7eb690e.png)

# パラメータ

埋め込みコードの一部として提供される以下のパラメータを使用できます。

- bc_video_id: ビデオコンテンツの一意のID
- bc_video_name: ビデオコンテンツ名
- bc_event: 発生した各イベントタイプに対して値が設定されます
  - Player Loaded
  - Contents Loaded
  - Play
  - Pause
  - Error
  - FullScreen Start: フルスクリーンモードを開始
  - FullScreen Exit: フルスクリーンモードを終了
  - Volume Change: 音量を変更
  - Complete: ビデオが完了
  - Percent of View: ビデオ完了の%
  - Elapsed of View: ビデオの経過時間（秒）
  - Seek: シーク移動
- bc_duration: ビデオコンテンツの長さ
- bc_session_id: セッションの一意のID
- bc_volume:
  - 0はミュート、1は最大音量です。
- bc_percent
  - 視聴完了の割合
- bc_elapsed *
  - ビデオの経過時間
- bc_seek_start、bc_seek_end: ユーザーが5秒の地点から10秒の地点にスキップした場合、bc_seek_startとbc_seek_endはそれぞれ5と10に設定されます。


bc_elapsed – 5秒ごとに発火されます。ライブビデオの場合、ユーザーがビデオを視聴した経過時間を示します。録画されたビデオ（コンテンツの長さがすでに決定されているもの）の場合、5秒、10秒、15秒などのそのコンテンツの再生位置を指します。

# ビデオ再生サイトのドメインに関連する情報の取得

BrightcoveでTDのSSC機能を使用する場合は、iframeタグではなく、「Gallery (Grid In-Page)」の推奨JSタグまたは「Media」の高度なビデオタグを使用する必要があります。なぜなら、iframeタグによって発火されるソースドメインはBrightcoveのドメインであり、期待されるSSC（ビデオ再生サイトの1stパーティドメインに関連付けられたCookie）を取得できないためです。Gallery Grid In-PageのJSタグまたはMediaの高度なビデオタグによって発火されるTDタグは、ビデオ再生サイトのドメインにリンクされているため、SSCを取得できます。

Brightcoveが1つのクリエイティブ内で複数ビデオエクスペリエンスとして提供するGallery in page形式からイベントデータをインポートできます。

以下のGallery形式がサポートされています。

- Carousel
- Grid


1. Gallery in pageクリエイティブを作成します。
![](/assets/image-20191010-230813.ea49ca76546136a30996c17c8cd3e52b32d18928593e101abf985c6bcb2fc028.c7eb690e.png)
2. 次に、クリエイティブ用のPlayerを設定できます。
![](/assets/image-20191010-230904.270d599e9c87a547eeb8cbb686591aa030a9d322b9f00cbf321203aa7fa1f714.c7eb690e.png)
3. 変更を公開し、表示されたコードをコピーします。
エクスペリエンスは、Treasure Dataにインポートできるイベントとしてキャプチャされます。たとえば、視聴者がビデオを視聴し、次にクリエイティブ内の次のビデオを選択して視聴すると、データコネクタは変更をキャプチャし、次のビデオでイベントの追跡を開始します。
![](/assets/image-20191010-231023.e132a06dda35d5f3363467105f2d31fb061c34dbf6e66d0ff1728d8abfaa6255.c7eb690e.png)