カスタマイズ
連携
ビデオグアナリティクス
ビデオグのアクセス解析機能に視聴データを送信します。
初めに
本機能を利用するためには以下が必要になります。
- ビデオグのエンタープライズプラン契約。
- ご希望の場合はビデオグサポートまでお問合せください。
- ビデオグアカウントのお客様番号。
- 許可ドメインの申請。
- プレイヤーが表示されるページのドメインを申請してください。
- 申請はこちらから可能です。
- ドメインの許可設定には5営業日程度のお時間をいただきます。
読み込みファイル
ソース
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- jQuery -->
src="https://player-cdn.videog.jp/r/js/jquery.min.js"
<!-- Lodash -->
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"
<!-- videogPlayer -->
src="https://player-cdn.videog.jp/r/js/videog_player/2.2.11/videogplayer/videogplayer.min.js" defer
<!-- index.js-->
src="./index.js" defer
<!-- videogPlayerTrace -->
src="https://player-cdn.videog.jp/r/js/videog_player_trace2/stable/main.js" defer
<!-- ashino_transmitter -->
src="https://player-cdn.videog.jp/r/js/ashino_transmitter/stable/transmitter.js" defer
<!-- ashino_handler -->
src="https://player-cdn.videog.jp/r/js/ashino_handler/stable/ashino_handler.js" defer
説明
| ファイル名 | 説明 |
|---|---|
| jQuery | JavaScriptコードをより容易に記述できるようにするために設計された外部のJavaScriptライブラリです。 |
| Lodash | 一般的なプログラミングタスクのためのユーティリティ関数を提供する外部のJavaScriptライブラリです。 |
| VideogPlayer | ビデオグプレイヤーの本体ファイルです。 |
| index.js | プレイヤーの表示とアクセス解析のデータ取得処理を行うjsファイルです。お客様が自由に編集できます。 |
| ashino_handler | ビデオグアナリティクスに必要な各イベントにフックして、処理の開始をキックするビデオグアナリティクス専用ファイルです。 |
| videogPlayerTrace,ashino_transmitter | ビデオグアナリティクスの仕様に合わせた形にデータを整形し、サーバへ送信するビデオグアナリティクス専用ファイルです。 |
オプション
説明
視聴者識別IDや任意の文字列データをビデオグアナリティクスに送信したい場合は、以下のパラメーターを設定すると計測が可能になります。
仕様
| パラメーター名 | 型 | 値 | 設定 |
|---|---|---|---|
| aud_id | integer | number | 任意 |
| str1 | string | text | 任意 |
| str2 | string | text | 任意 |
説明
| パラメーター名 | 型 |
|---|---|
| aud_id | 視聴者を特定する一意な番号を設定します。 |
| str1 | 配信者側で自由に設定できるデータです。 |
| str2 | 配信者側で自由に設定できるデータです。 |
動画のhash
説明
ビデオグアナリティクスに視聴データを送る動画を指定します。
取得方法
- ビデオグAPIの「動画リスト」APIで「動画のhash値」を取得する。※要ログイン
- ビデオグ管理画面の「一覧表示」から取得する。
コードサンプル
index.js
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
// Videogプレイヤー用にグローバルでユニークな変数を使用する
try {
if (VideogPlayerApp) {
window.VideogPlayerApp = VideogPlayerApp;
} else {
window.VideogPlayerApp = {};
}
} catch (error) {
window.VideogPlayerApp = {};
}
// アクセス解析用のデータを取得
let analyticsData = {};
$.ajax({
type: "GET",
url: "//www.videog.jp/system/api/ajax/w6/get_videog_analytics_data.php",
data: {
hash: "xxxxxxx", // 集計する動画のhashを入力
}
}).done(function( data ) {
// データの追加。必要があればここに追加する。
data.aud_id = 1234; // オプション
data.str1 = "other data 1"; // オプション
data.str2 = "other data 2"; // オプション
// 変数の設定
VideogPlayerApp.analyticsData = analyticsData = data;
}).fail( function(jqXHR, textStatus, errorThrown) {
console.error(errorThrown);
console.error(jqXHR.responseText);
});
// プレイヤー用のオプション設定
const options = {
play_list: [
{
sources: [
{
file: 'https://sample.jp/media.mp4',
},
],
},
],
};
// プレイヤーの初期化
const player = videogplayer('video_tag_id', options);
// 変数の設定
VideogPlayerApp.player = player;
index.html
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
<!DOCTYPE html>
charset="UTF-8"
name="viewport" content="width=device-width, initial-scale=1.0"
http-equiv="X-UA-Compatible" content="ie=edge"
Videog player & Videog analytics sample
<!-- CSS -->
href="https://player-cdn.videog.jp/r/js/videog_player/2.2.11/videogplayer/videogplayer.min.css" rel="stylesheet"
id="video_tag_id"
<!-- jQuery -->
src="https://player-cdn.videog.jp/r/js/jquery.min.js"
<!-- Lodash -->
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"
<!-- videogPlayer -->
src="https://player-cdn.videog.jp/r/js/videog_player/2.2.11/videogplayer/videogplayer.min.js" defer
<!-- index.js-->
src="./index.js" defer
<!-- videogPlayerTrace -->
src="https://player-cdn.videog.jp/r/js/videog_player_trace2/stable/main.js" defer
<!-- ashino_transmitter -->
src="https://player-cdn.videog.jp/r/js/ashino_transmitter/stable/transmitter.js" defer
<!-- ashino_handler -->
src="https://player-cdn.videog.jp/r/js/ashino_handler/stable/ashino_handler.js" defer