Appearance

Getting Started ​

Load APS ​

  1. Load the APS Web SDK asynchronously from the <head> of your web page.
  2. Replace account_id with your APS publisher ID.
html
<link rel="preconnect" href="https://aax.amazon-adsystem.com" />
<link
  rel="preload"
  href="https://config.aps.amazon-adsystem.com/configs/account_id"
  as="script"
  fetchpriority="high"
/>
<script
  async
  src="https://config.aps.amazon-adsystem.com/configs/account_id"
  fetchpriority="high"
></script>
<link
  rel="preload"
  href="https://client.aps.amazon-adsystem.com/publisher.js"
  as="script"
  fetchpriority="high"
/>
<script
  async
  src="https://client.aps.amazon-adsystem.com/publisher.js"
  fetchpriority="high"
></script>
<link rel="preconnect" href="https://aax.amazon-adsystem.com" />
<link
  rel="preload"
  href="https://config.aps.amazon-adsystem.com/configs/account_id"
  as="script"
  fetchpriority="high"
/>
<script
  async
  src="https://config.aps.amazon-adsystem.com/configs/account_id"
  fetchpriority="high"
></script>
<link
  rel="preload"
  href="https://client.aps.amazon-adsystem.com/publisher.js"
  as="script"
  fetchpriority="high"
/>
<script
  async
  src="https://client.aps.amazon-adsystem.com/publisher.js"
  fetchpriority="high"
></script>

Initialize APS ​

The next object, aps, will represent your integration and can be named whatever you desire. While the definition of the _aps object must be exactly as it is defined here, the definition and name of the aps object can be changed to suit your specific needs.

warning

The APS library is defined to window object _aps. Please ensure that you do not use the same variable name in your integration.

js
// initialize APS
const accountID = "account_id";

window._aps = window._aps || new Map();
if (!_aps.has(accountID)) {
  _aps.set(accountID, {
    queue: new Array(),
    store: new Map(),
  });
}

const aps = {
  accountID,
  record: function (name, detail) {
    return new Promise((resolve, reject) => {
      _aps.get(this.accountID).queue.push(
        new CustomEvent(name, {
          detail: { ...detail, resolve, reject },
        })
      );
    });
  },
  read: function (name) {
    return _aps.get(this.accountID).store.get(name);
  },
};
// initialize APS
const accountID = "account_id";

window._aps = window._aps || new Map();
if (!_aps.has(accountID)) {
  _aps.set(accountID, {
    queue: new Array(),
    store: new Map(),
  });
}

const aps = {
  accountID,
  record: function (name, detail) {
    return new Promise((resolve, reject) => {
      _aps.get(this.accountID).queue.push(
        new CustomEvent(name, {
          detail: { ...detail, resolve, reject },
        })
      );
    });
  },
  read: function (name) {
    return _aps.get(this.accountID).store.get(name);
  },
};