คู่มือแนะนำการใช้งาน ByteArk

# Client Side Ad Insertion (CSAI)

Note

ฟีเจอร์นี้ของ ByteArk Player รองรับเฉพาะผู้ใช้ ByteArk Video Cloud for Business หากท่านต้องการใช้งานกรุณาติดต่อ sales@byteark.com

ByteArk Player รองรับการแสดงผลโฆษณาในรูปบบ Client Side Ad Insertion (CSAI) โดยสามารถแทรกโฆษณาในขณะที่ผู้ชมกำลังรับชมรายการสดได้ (Live Streaming)

# ความต้องการของระบบในการใช้งาน Client Side Ad Insertion

  1. HLS Live streaming url ที่มีการเปิดใช้งาน Ad Insertion จากทาง ByteARk
  2. Ad Server ที่รองรับการขอโฆษณาแบบระบุความยาวของเบรคโฆษณาได้ (Ad Break Duration)

# การเปิดใช้งาน Client Side Ad Insertion

การเปิดใช้งานการเล่นโฆษณาแบบ Client Side Ad Insertion บน ByteArk Player สามารถทำได้โดยระบุ plugins.bytearkCsai ใน options เมื่อทำการสร้าง video player โดยสามารถตั้งค่าพารามิเตอร์ต่างๆ ตามตาราง options ด้านล่าง

{
  fluid: true,
  poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
  sources: [{
    title: 'Live Stream',
    src: 'LIVE_STREAM_URL',
    type: 'application/x-mpegURL'
  }],
  plugins: {
    bytearkCsai: {
      debug: true,
      adTagUrl: 'AD_SERVER_URL',
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# การปรับตั้งค่า options

Name Type Required Description
debug Boolean No เปิด/ปิด debug
adTagUrl String Yes Ad Server ที่รองรับการขอโฆษณาแบบระบุความยาวของเบรคโฆษณาได้ (Ad Break Duration)
integration String No Ad integration สำหรับแสดงผลโฆษณา สามารถมีค่าเป็น google-ima หรือ castoola
adTagParameters Object No Ad parameters ที่ต้องการส่งให้ Ad Server ในรูปแบบ key-value

# ตัวอย่างซอร์สโค้ด

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Live Stream',
          src: 'LIVE_STREAM_URL',
          type: 'application/x-mpegURL'
        }],
        plugins: {
          bytearkCsai: {
            adTagUrl: 'AD_SERVER_URL',
          }
        }
      });
    </script>
  </body>
</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

# การปรับตั้งค่า adTagParameters สำหรับส่งข้อมูลให้ Google Ad Manager

การตั้งค่าเพื่อส่งข้อมูล adTagParameters ให้กับ Google Ad Manager สามารถทำได้โดย

  1. เพิ่ม integration: 'google-ima' เข้าไปใน options ของ bytearkCsai plugin
  2. เพิ่ม key adTagParameters เข้าไปใน options ของ bytearkCsai plugin ข้อมูล key และ value ทั้งหมดที่สามารถใช้งานได้สามารถดูเพิ่มเติมได้ที่ เอกสาร VAST ad tag URL parameters ของ Google Ad Manager (opens new window)

Note

หากชื่อ key ที่ใส่ใน adTagParameters ซ้ำกับ key ใน query string ที่อยู่ใน adTagUrl ค่า key ที่อยู่ใน adTagUrl จะถูกแทนที่ด้วยค่าใน adTagParameters

# การใช้งาน Macros สำหรับส่งข้อมูลให้ Google Ad Manager

ByteArk CSAI plugin รองรับการใช้งาน macro โดย player จะทำการแทนค่าให้หากมีการใส่ macro นั้นมา เช่น macro [url] player จะทำการแทนค่า [url] โดยใช้ url ของหน้าเว็บปัจจุบันที่มีการเล่นวิดีโออยู่ และส่งค่าให้ Google Ad Manager

{
  ...
  integration: 'google-ima',
  adTagParameters: {
    url: '[url]'
  }
}
1
2
3
4
5
6
7

รายชื่อ Macro ที่รองรับ

Macro Name Type Value Description
url String [url] url ของหน้าเว็บปัจจุบันที่มีการเล่นวิดีโออยู่

# ตัวอย่างซอร์สโค้ด

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Live Stream',
          src: 'LIVE_STREAM_URL',
          type: 'application/x-mpegURL'
        }],
        plugins: {
          bytearkCsai: {
            adTagUrl: 'AD_SERVER_URL',
            integration: 'google-ima',
            adTagParameters: {
              url: '[url]'
              ppsj: {
                PublisherProvidedTaxonomySignals: [{
                  taxonomy: 'IAB_AUDIENCE_1_1',
                  values: [ '1', '284' ]
                }]
              },
              cust_params: {
                section: 'blog',
                anotherKey: [ 'value1', 'value2' ]
              }
            }
          }
        }
      });
    </script>
  </body>
</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
32
33
34
35
36
37
38
39
40

# การปรับตั้งค่า adTagParameters สำหรับส่งข้อมูลให้ Castoola

การตั้งค่าเพื่อส่งข้อมูล adTagParameters ให้กับ Castoola Ad Server สามารถทำได้โดย

  1. เพิ่ม integration: 'castoola' เข้าไปใน options ของ bytearkCsai plugin
  2. เพิ่ม key adTagParameters เข้าไปใน options ของ bytearkCsai plugin ข้อมูล key และ value ทั้งหมดที่สามารถใช้งานได้สามารถดูเพิ่มเติมได้จากเอกสารที่ได้รับจากทาง Castoola

Note

หากชื่อ key ที่ใส่ใน adTagParameters ซ้ำกับ key ใน query string ที่อยู่ใน adTagUrl ค่า key ที่อยู่ใน adTagUrl จะถูกแทนที่ด้วยค่าใน adTagParameters

# การใช้งาน Macros สำหรับส่งข้อมูลให้ Castoola

ByteArk CSAI plugin รองรับการใช้งาน macro โดย player จะทำการแทนค่าให้หากมีการใส่ macro นั้นมา เช่น macro [operating_system] player จะทำการแทนค่า [operating_system] โดย player จะทำการ detect ว่าปัจจุบันทำการเล่นวิดีโออยู่บน Operating System ใดอยู่ และส่งค่าให้ Castoola Ad Server

{
  ...
  integration: 'castoola',
  adTagParameters: {
    operating_system: '[operating_system]'
  }
}
1
2
3
4
5
6
7

รายชื่อ Macro ที่รองรับ

Macro Name Type Value Description
device_type String [device_type] player จะ detect ว่าเล่นวิดิโออยู่บน device ประเภทใดอยู่ สามารถมีค่าเป็น

- 1 is PC
- 2 is Smartphone
- 3 is Tablet
- 4 is STB
- 5 is Smart TV
dt String [dt] ตัวย่อของ device_type
operating_system String [operating_system] player จะ detect ว่าเล่นวิดีโออยู่บน operating system ในอยู่ สามารถมีค่าเป็น

- 1 is Windows
- 2 is MacOS
- 3 is Linux
- 4 is ChromeOS
- 5 is Android
- 6 is iOS
- 7 is Android TV
- 8 is Tizen TV
- 9 is WebOS
- 10 is tvOS
- 11 is VIDAA TV
- 12 is Roku TV
- 13 is Fire TV
- 0 is Other
os String [os] ตัวย่อยอง operating_system
content_id String [content_id] ค่าของ content_id โดย player จะใช้ค่าจาก videoId ของ Source Object
cid String [cid] ตัวย่อของ content_id
content_name String [content_name] ค่าของ content_name โดย player จะใช้ค่าจาก

- title ของ Source Object (หากมีการตั้งค่าไว้)
- videoTitle ของ lighthouse.video.videoTitle (หากมีการตั้งค่าไว้)
cnam String [cnam] ตัวย่อของ content_name
genre String [genre] ค่าของ genre โดย player จะใช้ค่าจาก lighthouse.video.genres (หากมีการตั้งค่าไว้)
gnr String [gnr] ตัวย่อของ genre

# ตัวอย่างซอร์สโค้ด

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="video-player"></div>
    <script src="https://byteark-sdk.cdn.byteark.com/player/v2/byteark-player.min.js"></script>
    <script>
      var player = bytearkPlayer('video-player', {
        fluid: true,
        poster: '/assets/samples/player/images/poster-big-buck-bunny.jpg',
        sources: [{
          title: 'Live Stream',
          src: 'LIVE_STREAM_URL',
          type: 'application/x-mpegURL'
        }],
        plugins: {
          bytearkCsai: {
            adTagUrl: 'AD_SERVER_URL',
            integration: 'castoola',
            adTagParameters: {
              content_type: 'l',
              device_id: 'SOME_DEVICE_ID',
              device_type: '[device_type]',
              operating_system: '[operating_system]',
              publisher_id: 'SOME_PUBLISHER_ID'
            }
          }
        }
      });
    </script>
  </body>
</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
32
33
34

← ByteArk Firework →

Pricing Contact Terms of Service