# 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

HLS Live streaming url ที่มีการเปิดใช้งาน Ad Insertion จากทาง ByteARk
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

# การตั้งค่า

Name	Type	Required	Description
debug	Boolean	No	เปิด/ปิด debug
adTagUrl	String	Yes	Ad Server ที่รองรับการขอโฆษณาแบบระบุความยาวของเบรคโฆษณาได้ (Ad Break Duration)
integration	String	No	Ad integration สำหรับแสดงผลโฆษณา สามารถมีค่าเป็น `google-ima`
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 สามารถทำได้โดย

เพิ่ม integration: 'google-ima' เข้าไปใน options ของ bytearkCsai plugin
เพิ่ม 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

← การเล่นโฆษณา (Advertisement) HLS ClearKey →