@dcard/web-ad-tracking-sdk

v3.0.0

Published

17 days ago

The public advertising tracking SDK for web environments powered by Dcard Inc.

Downloads

4,643

0High
0Medium
0Low

The advertising tracking SDK for web environments powered by Dcard Inc.

🏠 Homepage

Install & Usage

Integrate tracking SDK into your codebase (Support typing automatically in IDE like vscode)

Install @dcard/web-ad-tracking-sdk

pnpm add @dcard/web-ad-tracking-sdk

Import @dcard/web-ad-tracking-sdk

import entry from '@dcard/web-ad-tracking-sdk';

// Substitute the real client ID for CLIENT_ID issued by Dcard.
entry('init', 'CLIENT_ID');
entry('track', 'PageView', { url: window.location.href });

Embed the SDK in the HTML file

Copy and paste the following script tags within the <head> tag of your HTML file to initialize the web tracking SDK.

<script
  async
  src="https://assets.dcard.tw/scripts/web-ad-tracking-sdk/latest.js"></script>
<script>
  /**
   * ===[[ Section 1 ]]===
   */
  window.dadk =
    window.dadk ||
    function dadk() {
      window.dadk.queue.push(Array.from(arguments));
    };
  window.dadk.queue = window.dadk.queue || [];

  /**
   * ===[[ Section 2 ]]===
   *
   * Change "CLIENT_ID" to your client id
   * e.g. "XXXOOO123456"
   */
  window.dadk('init', 'CLIENT_ID');
  window.dadk('track', 'PageView');
</script>

With Security Resource Integrity (SRI)

If you want to use the script with SRI, you can replace the first script with the following:

- <script async src="https://assets.dcard.tw/scripts/web-ad-tracking-sdk/latest.js"></script>
+ <script async src="https://assets.dcard.tw/scripts/web-ad-tracking-sdk/v3.0.0.js" integrity="sha384-OEa0OLZxesMGpNtP3OvBd1dUrOIEFQK0ofDakusy9o7zMeywjDcN/Ujv7gCCILBz" crossorigin="anonymous"></script>

NOTE: The script tag with SRI will fix the version of the SDK, an this may cause the SDK to be outdated. If you want to keep the SDK up-to-date, please use the latest version script tag.

Setup Content Security Policy (CSP)

Basic Setup

Security Connection

img-src: https://pixel.dcard.tw
script-src: https://pixel.dcard.tw https://assets.dcard.tw/scripts/web-ad-tracking-sdk

Insecurity Connection

img-src: pixel.dcard.tw
script-src: pixel.dcard.tw assets.dcard.tw/scripts/web-ad-tracking-sdk

With Nonce

Revice the Content Security Policy header with nonce attribute:

img-src: https://pixel.dcard.tw
script-src: 'nonce-{SERVER_GENERATED_NONCE}' https://pixel.dcard.tw https://assets.dcard.tw/scripts/web-ad-tracking-sdk

And add the nonce attribute to the script tag:

<script async nonce="SERVER_GENERATED_NONCE" crossorigin="anonymous">
  /**
   * ===[[ Section 1 ]]===
   */
  window.dadk =
    window.dadk ||
    function dadk() {
      window.dadk.queue.push(Array.from(arguments));
    };
  window.dadk.queue = window.dadk.queue || [];

  /**
   * ===[[ Section 2 ]]===
   *
   * Change "CLIENT_ID" to your client id
   * e.g. "XXXOOO123456"
   */
  window.dadk('init', 'CLIENT_ID');
  window.dadk('track', 'PageView');
</script>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme