@dcard/web-ad-tracking-sdk
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Welcome to Dcard Web AD Tracking SDK 👋

NPM version License: MIT

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)

  1. Install @dcard/web-ad-tracking-sdk
pnpm add @dcard/web-ad-tracking-sdk
  1. 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>

Readme

Keywords

none

Package Sidebar

Install

npm i @dcard/web-ad-tracking-sdk

Weekly Downloads

681

Version

3.0.0

License

MIT

Unpacked Size

518 kB

Total Files

8

Last publish

Collaborators

  • dcardfonger
  • erozak
  • jigsawye
  • tommy351
  • fonger
  • chentsulin
  • chechunhsu