@smg-automotive/advertisement-pkg - npm Package Compare versions

Comparing version 1.0.0-talamcol-init-wrapper-9bac9d7115e23e967d1263f785004eff69d8afeb.1 to 1.0.0-talamcol-init-wrapper-ee5296a04a107894e58f0a00e98b9f8f1c8d7c4c.1

dist/cjs/index.js

@@ -24,2 +24,32 @@ 'use strict';
 
+var windowSmgRelevantAdObject = {};
+
+var relevantLoadPrebidQueuePush = function (_a) {
+    var _b, _c;
+    var relevantDigitalConfigId = _a.relevantDigitalConfigId, keywords = _a.keywords, _d = _a.allowedDivIds, allowedDivIds = _d === void 0 ? undefined : _d, _e = _a.noSlotReload, noSlotReload = _e === void 0 ? false : _e;
+    (_c = (_b = window.relevantDigital) === null || _b === void 0 ? void 0 : _b.cmd) === null || _c === void 0 ? void 0 : _c.push(function () {
+        var _a;
+        (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.loadPrebid({
+            configId: relevantDigitalConfigId,
+            manageAdserver: true,
+            noGpt: true,
+            noSlotReload: noSlotReload,
+            allowedDivIds: allowedDivIds,
+            apntagCalls: {
+                defineTag: function (tagData) {
+                    var _a;
+                    // pass keywords for non-standalone ad slots
+                    // for standalone we pass keywords direct
+                    tagData.keywords = keywords;
+                    return (_a = window.apntag) === null || _a === void 0 ? void 0 : _a.defineTag(tagData);
+                },
+            },
+        });
+    });
+};
+var relevantDestroySlots = function () {
+    var _a;
+    (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.destroySlots();
+};
+
 /******************************************************************************
@@ -53,2 +83,14 @@ Copyright (c) Microsoft Corporation.
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __spreadArray(to, from, pack) {
@@ -69,34 +111,18 @@ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 
-var windowSmgRelevantAdObject = {};
-
-var relevantLoadPrebidQueuePush = function (_a) {
-    var _b, _c;
-    var relevantDigitalConfigId = _a.relevantDigitalConfigId, keywords = _a.keywords, _d = _a.allowedDivIds, allowedDivIds = _d === void 0 ? undefined : _d, _e = _a.noSlotReload, noSlotReload = _e === void 0 ? false : _e;
-    (_c = (_b = window.relevantDigital) === null || _b === void 0 ? void 0 : _b.cmd) === null || _c === void 0 ? void 0 : _c.push(function () {
-        var _a;
-        (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.loadPrebid({
-            configId: relevantDigitalConfigId,
-            manageAdserver: true,
-            noGpt: true,
-            noSlotReload: noSlotReload,
-            allowedDivIds: allowedDivIds,
-            apntagCalls: {
-                defineTag: function (tagData) {
-                    var _a;
-                    // pass keywords for non-standalone ad slots
-                    // for standalone we pass keywords direct
-                    tagData.keywords = keywords;
-                    return (_a = window.apntag) === null || _a === void 0 ? void 0 : _a.defineTag(tagData);
-                },
-            },
-        });
-    });
+var AdContext = React__namespace.createContext(null);
+var useAdContext = function () {
+    var context = React__namespace.useContext(AdContext);
+    if (!context) {
+        throw new Error('useAdContext must be used within a AdProvider. Please wrap your app with AdProvider');
+    }
+    return context;
 };
-var relevantDestroySlots = function () {
-    var _a;
-    (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.destroySlots();
+var AdProvider = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React__namespace.createElement(AdContext.Provider, { value: __assign({}, rest) }, children));
 };
 
 var useRelevantDigital = function (_a) {
-    var keywords = _a.keywords, relevantDigitalConfigId = _a.relevantDigitalConfigId;
+    var keywords = _a.keywords;
+    var relevantDigitalConfigId = useAdContext().relevantDigitalConfigId;
     var _b = React.useState(windowSmgRelevantAdObject.injected), isInjected = _b[0], setIsInjected = _b[1];
@@ -116,6 +142,3 @@ // we set global function here to trigger it once scripts are injected
             relevantLoadPrebidQueuePush({
-                // TODO: remove after Ad-Server A/B test is ended
-                // TODO: check with Tutti why and if still needed
-                // not by our key-value naming nomenclature, as Xandr already set it that way.
-                keywords: __assign({}, keywords),
+                keywords: keywords,
                 relevantDigitalConfigId: relevantDigitalConfigId,
@@ -256,3 +279,4 @@ });
 var useInjectScripts = function (_a) {
-    var relevantDigitalCdnUrl = _a.relevantDigitalCdnUrl, astCdnUrl = _a.astCdnUrl, debug = _a.debug;
+    var debug = _a.debug;
+    var _b = useAdContext(), astCdnUrl = _b.astCdnUrl, relevantDigitalCdnUrl = _b.relevantDigitalCdnUrl;
     // AST injection is optional - if we don't inject it then relevant library will
@@ -345,3 +369,4 @@ // useScript internally makes sure we do not inject multiple times
 var AdSlot = function (_a) {
-    var astCdnUrl = _a.astCdnUrl, relevantDigitalConfigId = _a.relevantDigitalConfigId, relevantDigitalCdnUrl = _a.relevantDigitalCdnUrl, adUnitId = _a.adUnitId, id = _a.id, nativeAdComponent = _a.nativeAdComponent, onLoad = _a.onLoad, onError = _a.onError, _b = _a.standalone, standalone = _b === void 0 ? false : _b, _c = _a.keywords, keywords = _c === void 0 ? {} : _c, _d = _a.destroyOnUnmount, destroyOnUnmount = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e;
+    var adUnitId = _a.adUnitId, id = _a.id, nativeAdComponent = _a.nativeAdComponent, onLoad = _a.onLoad, onError = _a.onError, _b = _a.standalone, standalone = _b === void 0 ? false : _b, _c = _a.keywords, keywords = _c === void 0 ? {} : _c, _d = _a.destroyOnUnmount, destroyOnUnmount = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e;
+    var relevantDigitalConfigId = useAdContext().relevantDigitalConfigId;
     var _f = React__namespace.useState(), nativeProps = _f[0], setNativeProps = _f[1];
@@ -351,4 +376,2 @@ var isDebugOn = debug || getDebugFromUrl();
     var _g = useInjectScripts({
-        astCdnUrl: astCdnUrl,
-        relevantDigitalCdnUrl: relevantDigitalCdnUrl,
         debug: isDebugOn,
@@ -442,6 +465,3 @@ }), isInjected = _g.isInjected, isAdBlocked = _g.isAdBlocked;
         relevantLoadPrebidQueuePush({
-            // TODO: remove after Ad-Server A/B test is ended
-            // TODO: check with Tutti why and if still needed
-            // not by our key-value naming nomenclature, as Xandr already set it that way.
-            keywords: __assign({}, keywords),
+            keywords: keywords,
             allowedDivIds: [id],
@@ -471,4 +491,5 @@ noSlotReload: true,
 
+exports.AdProvider = AdProvider;
 exports.AdSlot = AdSlot;
 exports.useRelevantDigital = useRelevantDigital;
 //# sourceMappingURL=index.js.map

dist/cjs/types/components/AdSlot.d.ts

@@ -9,5 +9,2 @@ import * as React from 'react';
 export type AdSlotProps = {
-    relevantDigitalConfigId: string;
-    relevantDigitalCdnUrl: string;
-    astCdnUrl: string;
     adUnitId: number | string;
@@ -14,0 +11,0 @@ id: IdVariantType;

dist/cjs/types/hooks/useInjectScripts.d.ts

@@ -10,7 +10,5 @@ declare global {
 type Props = {
-    relevantDigitalCdnUrl: string;
-    astCdnUrl: string;
     debug: boolean;
 };
-declare const useInjectScripts: ({ relevantDigitalCdnUrl, astCdnUrl, debug, }: Props) => UseInjectScriptsType;
+declare const useInjectScripts: ({ debug }: Props) => UseInjectScriptsType;
 export default useInjectScripts;

dist/cjs/types/hooks/useRelevantDigital.d.ts

 import type { KeyValues } from '../types/ads';
 export interface UseRelevantDigitalProps {
     keywords: undefined | KeyValues;
-    relevantDigitalConfigId: string;
 }
-declare const useRelevantDigital: ({ keywords, relevantDigitalConfigId, }: UseRelevantDigitalProps) => void;
+declare const useRelevantDigital: ({ keywords }: UseRelevantDigitalProps) => void;
 export default useRelevantDigital;

dist/cjs/types/index.d.ts

@@ -1,5 +0,6 @@
-import type { NativeAdComponentProps } from './types/ads';
+import type { KeyValues, NativeAdComponentProps } from './types/ads';
 import useRelevantDigital from './hooks/useRelevantDigital';
+import { AdProvider } from './contexts/Ad';
 import AdSlot, { type AdSlotProps } from './components/AdSlot';
-export { AdSlot, useRelevantDigital };
-export type { AdSlotProps, NativeAdComponentProps };
+export { AdProvider, AdSlot, useRelevantDigital };
+export type { AdSlotProps, NativeAdComponentProps, KeyValues };

dist/cjs/types/types/ads.d.ts

 import type { ComponentType } from 'react';
-export type KeyValues = Record<string, Array<string>>;
+export type KeyValues = Record<string, string | Array<string>>;
 export interface XandrAdObject {
@@ -4,0 +4,0 @@ adType: 'banner' | 'video' | 'native';

dist/esm/index.js

 import * as React from 'react';
 import { useState, useEffect } from 'react';
 
+var windowSmgRelevantAdObject = {};
+
+var relevantLoadPrebidQueuePush = function (_a) {
+    var _b, _c;
+    var relevantDigitalConfigId = _a.relevantDigitalConfigId, keywords = _a.keywords, _d = _a.allowedDivIds, allowedDivIds = _d === void 0 ? undefined : _d, _e = _a.noSlotReload, noSlotReload = _e === void 0 ? false : _e;
+    (_c = (_b = window.relevantDigital) === null || _b === void 0 ? void 0 : _b.cmd) === null || _c === void 0 ? void 0 : _c.push(function () {
+        var _a;
+        (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.loadPrebid({
+            configId: relevantDigitalConfigId,
+            manageAdserver: true,
+            noGpt: true,
+            noSlotReload: noSlotReload,
+            allowedDivIds: allowedDivIds,
+            apntagCalls: {
+                defineTag: function (tagData) {
+                    var _a;
+                    // pass keywords for non-standalone ad slots
+                    // for standalone we pass keywords direct
+                    tagData.keywords = keywords;
+                    return (_a = window.apntag) === null || _a === void 0 ? void 0 : _a.defineTag(tagData);
+                },
+            },
+        });
+    });
+};
+var relevantDestroySlots = function () {
+    var _a;
+    (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.destroySlots();
+};
+
 /******************************************************************************
@@ -32,2 +62,14 @@ Copyright (c) Microsoft Corporation.
 
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __spreadArray(to, from, pack) {
@@ -48,34 +90,18 @@ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
 
-var windowSmgRelevantAdObject = {};
-
-var relevantLoadPrebidQueuePush = function (_a) {
-    var _b, _c;
-    var relevantDigitalConfigId = _a.relevantDigitalConfigId, keywords = _a.keywords, _d = _a.allowedDivIds, allowedDivIds = _d === void 0 ? undefined : _d, _e = _a.noSlotReload, noSlotReload = _e === void 0 ? false : _e;
-    (_c = (_b = window.relevantDigital) === null || _b === void 0 ? void 0 : _b.cmd) === null || _c === void 0 ? void 0 : _c.push(function () {
-        var _a;
-        (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.loadPrebid({
-            configId: relevantDigitalConfigId,
-            manageAdserver: true,
-            noGpt: true,
-            noSlotReload: noSlotReload,
-            allowedDivIds: allowedDivIds,
-            apntagCalls: {
-                defineTag: function (tagData) {
-                    var _a;
-                    // pass keywords for non-standalone ad slots
-                    // for standalone we pass keywords direct
-                    tagData.keywords = keywords;
-                    return (_a = window.apntag) === null || _a === void 0 ? void 0 : _a.defineTag(tagData);
-                },
-            },
-        });
-    });
+var AdContext = React.createContext(null);
+var useAdContext = function () {
+    var context = React.useContext(AdContext);
+    if (!context) {
+        throw new Error('useAdContext must be used within a AdProvider. Please wrap your app with AdProvider');
+    }
+    return context;
 };
-var relevantDestroySlots = function () {
-    var _a;
-    (_a = window.relevantDigital) === null || _a === void 0 ? void 0 : _a.destroySlots();
+var AdProvider = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return (React.createElement(AdContext.Provider, { value: __assign({}, rest) }, children));
 };
 
 var useRelevantDigital = function (_a) {
-    var keywords = _a.keywords, relevantDigitalConfigId = _a.relevantDigitalConfigId;
+    var keywords = _a.keywords;
+    var relevantDigitalConfigId = useAdContext().relevantDigitalConfigId;
     var _b = useState(windowSmgRelevantAdObject.injected), isInjected = _b[0], setIsInjected = _b[1];
@@ -95,6 +121,3 @@ // we set global function here to trigger it once scripts are injected
             relevantLoadPrebidQueuePush({
-                // TODO: remove after Ad-Server A/B test is ended
-                // TODO: check with Tutti why and if still needed
-                // not by our key-value naming nomenclature, as Xandr already set it that way.
-                keywords: __assign({}, keywords),
+                keywords: keywords,
                 relevantDigitalConfigId: relevantDigitalConfigId,
@@ -235,3 +258,4 @@ });
 var useInjectScripts = function (_a) {
-    var relevantDigitalCdnUrl = _a.relevantDigitalCdnUrl, astCdnUrl = _a.astCdnUrl, debug = _a.debug;
+    var debug = _a.debug;
+    var _b = useAdContext(), astCdnUrl = _b.astCdnUrl, relevantDigitalCdnUrl = _b.relevantDigitalCdnUrl;
     // AST injection is optional - if we don't inject it then relevant library will
@@ -324,3 +348,4 @@ // useScript internally makes sure we do not inject multiple times
 var AdSlot = function (_a) {
-    var astCdnUrl = _a.astCdnUrl, relevantDigitalConfigId = _a.relevantDigitalConfigId, relevantDigitalCdnUrl = _a.relevantDigitalCdnUrl, adUnitId = _a.adUnitId, id = _a.id, nativeAdComponent = _a.nativeAdComponent, onLoad = _a.onLoad, onError = _a.onError, _b = _a.standalone, standalone = _b === void 0 ? false : _b, _c = _a.keywords, keywords = _c === void 0 ? {} : _c, _d = _a.destroyOnUnmount, destroyOnUnmount = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e;
+    var adUnitId = _a.adUnitId, id = _a.id, nativeAdComponent = _a.nativeAdComponent, onLoad = _a.onLoad, onError = _a.onError, _b = _a.standalone, standalone = _b === void 0 ? false : _b, _c = _a.keywords, keywords = _c === void 0 ? {} : _c, _d = _a.destroyOnUnmount, destroyOnUnmount = _d === void 0 ? false : _d, _e = _a.debug, debug = _e === void 0 ? false : _e;
+    var relevantDigitalConfigId = useAdContext().relevantDigitalConfigId;
     var _f = React.useState(), nativeProps = _f[0], setNativeProps = _f[1];
@@ -330,4 +355,2 @@ var isDebugOn = debug || getDebugFromUrl();
     var _g = useInjectScripts({
-        astCdnUrl: astCdnUrl,
-        relevantDigitalCdnUrl: relevantDigitalCdnUrl,
         debug: isDebugOn,
@@ -421,6 +444,3 @@ }), isInjected = _g.isInjected, isAdBlocked = _g.isAdBlocked;
         relevantLoadPrebidQueuePush({
-            // TODO: remove after Ad-Server A/B test is ended
-            // TODO: check with Tutti why and if still needed
-            // not by our key-value naming nomenclature, as Xandr already set it that way.
-            keywords: __assign({}, keywords),
+            keywords: keywords,
             allowedDivIds: [id],
@@ -450,3 +470,3 @@ noSlotReload: true,
 
-export { AdSlot, useRelevantDigital };
+export { AdProvider, AdSlot, useRelevantDigital };
 //# sourceMappingURL=index.js.map

dist/esm/types/components/AdSlot.d.ts

@@ -9,5 +9,2 @@ import * as React from 'react';
 export type AdSlotProps = {
-    relevantDigitalConfigId: string;
-    relevantDigitalCdnUrl: string;
-    astCdnUrl: string;
     adUnitId: number | string;
@@ -14,0 +11,0 @@ id: IdVariantType;

dist/esm/types/hooks/useInjectScripts.d.ts

@@ -10,7 +10,5 @@ declare global {
 type Props = {
-    relevantDigitalCdnUrl: string;
-    astCdnUrl: string;
     debug: boolean;
 };
-declare const useInjectScripts: ({ relevantDigitalCdnUrl, astCdnUrl, debug, }: Props) => UseInjectScriptsType;
+declare const useInjectScripts: ({ debug }: Props) => UseInjectScriptsType;
 export default useInjectScripts;

dist/esm/types/hooks/useRelevantDigital.d.ts

 import type { KeyValues } from '../types/ads';
 export interface UseRelevantDigitalProps {
     keywords: undefined | KeyValues;
-    relevantDigitalConfigId: string;
 }
-declare const useRelevantDigital: ({ keywords, relevantDigitalConfigId, }: UseRelevantDigitalProps) => void;
+declare const useRelevantDigital: ({ keywords }: UseRelevantDigitalProps) => void;
 export default useRelevantDigital;

dist/esm/types/index.d.ts

@@ -1,5 +0,6 @@
-import type { NativeAdComponentProps } from './types/ads';
+import type { KeyValues, NativeAdComponentProps } from './types/ads';
 import useRelevantDigital from './hooks/useRelevantDigital';
+import { AdProvider } from './contexts/Ad';
 import AdSlot, { type AdSlotProps } from './components/AdSlot';
-export { AdSlot, useRelevantDigital };
-export type { AdSlotProps, NativeAdComponentProps };
+export { AdProvider, AdSlot, useRelevantDigital };
+export type { AdSlotProps, NativeAdComponentProps, KeyValues };

dist/esm/types/types/ads.d.ts

 import type { ComponentType } from 'react';
-export type KeyValues = Record<string, Array<string>>;
+export type KeyValues = Record<string, string | Array<string>>;
 export interface XandrAdObject {
@@ -4,0 +4,0 @@ adType: 'banner' | 'video' | 'native';

dist/index.d.ts

 import * as React from 'react';
 import { ComponentType } from 'react';
 
-type KeyValues = Record<string, Array<string>>;
+type KeyValues = Record<string, string | Array<string>>;
 interface XandrAdObject {
@@ -56,6 +56,12 @@ adType: 'banner' | 'video' | 'native';
     keywords: undefined | KeyValues;
-    relevantDigitalConfigId: string;
 }
-declare const useRelevantDigital: ({ keywords, relevantDigitalConfigId, }: UseRelevantDigitalProps) => void;
+declare const useRelevantDigital: ({ keywords }: UseRelevantDigitalProps) => void;
 
+type AdContextType = {
+    relevantDigitalConfigId: string;
+    relevantDigitalCdnUrl: string;
+    astCdnUrl: string;
+};
+declare const AdProvider: React.FC<React.PropsWithChildren<AdContextType>>;
+
 type WithPrefix<GT extends string> = `${GT}${string}`;
@@ -67,5 +73,2 @@ type IdVariantType = WithPrefix<'home-' | 'srp-' | 'advanced-srp' | 'pdp-' | 'brand-' | 'ai-' | 'gallery-'>;
 type AdSlotProps = {
-    relevantDigitalConfigId: string;
-    relevantDigitalCdnUrl: string;
-    astCdnUrl: string;
     adUnitId: number | string;
@@ -103,2 +106,2 @@ id: IdVariantType;
 
-export { AdSlot, type AdSlotProps, type NativeAdComponentProps, useRelevantDigital };
+export { AdProvider, AdSlot, type AdSlotProps, type KeyValues, type NativeAdComponentProps, useRelevantDigital };

package.json

 {
   "name": "@smg-automotive/advertisement-pkg",
-  "version": "1.0.0-talamcol-init-wrapper-9bac9d7115e23e967d1263f785004eff69d8afeb.1",
+  "version": "1.0.0-talamcol-init-wrapper-ee5296a04a107894e58f0a00e98b9f8f1c8d7c4c.1",
   "description": "Contains Relevant Digital Header Bidding Wrapper for advertisements",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

README.md

 # advertisement-pkg
 
+Contains Relevant Digital Header Bidding Wrapper for advertisements.
+
 [![CircleCI](https://dl.circleci.com/status-badge/img/gh/smg-automotive/advertisement-pkg/tree/main.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/smg-automotive/advertisement-pkg/tree/main)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
+## About
+
+This library is created in an effort to integrate Relevant Digital HB Wrapper. It wraps Relevant HB [JavaScript API](https://help.relevant-digital.com/knowledge/hb-manager#javascript-api) that includes:
+
+- [xandr ad server](https://docs.xandr.com/)
+- [Prebid ORG lib prebid.js](https://prebid.org/)
+- [Relevant Analytics](https://help.relevant-digital.com/knowledge/hb-analytics)
+
+## Related docs and access
+
+- General [Help Center](https://help.relevant-digital.com/knowledge)
+- [API](https://help.relevant-digital.com/knowledge/api-insights)
+- [JavaScript API](https://help.relevant-digital.com/knowledge/hb-manager#javascript-api)
+- [A/B Tests](https://help.relevant-digital.com/knowledge/a/b-testing-and-child-prebid-configurations)
+- Relevant Ticket System [Relevant Digital's workspace](https://customer.to/relevant-digital/)
+
 ## Usage
@@ -11,2 +29,96 @@ ```
 
+### AdProvider
+
+The library needs a few configuration variables to work. For that reason, you should wrap your page/top level app component with the `<AdProvider/>` context.
+
+````tsx
+import { AdProvider } from "@smg-automotive/advertisement-pkg";
+
+const App = () => {
+    return (
+        <AdProvider
+            relevantDigitalConfigId="123abc"
+            astCdnUrl="https://acdn.adnxs.com/ast/ast.js"
+            relevantDigitalCdnUrl="https://relevant-cdn/123abc.js"
+        >
+            <AdSlot />
+        </AdProvider>
+    )
+}
+export default App
+````
+
+### AdSlot component
+
+The `AdSlot` component can be used to set two types of placements:
+
+- Inactive placement(default): set on the page and invoked only when `useRelevantDigital` hook is called. When this happens if you have mixed lazy and non-lazy loaded ads on page it will first initiate all non-lazy ones and in following request it will initiate the remaining lazy ones. On leaving the page hook will call [destroySlots](https://help.relevant-digital.com/knowledge/relevantdigital.destroyslots)
+- Standalone placement: invoked on component render, does not require `useRelevantDigital` to get invoked, but requires keywords to be set. Can still be used on same page with inactive ads, in that case there is no need to call `destroySlots()` as hook will clean them all. If is not used on page with the hook, then it should be set to call `destroySlots()` on its own by setting the param `destroyOnUnmount` to `true`.
+
+#### Inactive AdSlot example
+
+```tsx
+import { AdSlot, useRelevantDigital } from "@smg-automotive/advertisement-pkg";
+
+const keywords = { page: ['home'], site: ['yoursite.ch'], foo: "bar" };
+
+const BrandPage = () => {
+    return (
+        <div>
+            <AdSlot
+                adUnitId={1234567}
+                id="brand-outside-right"
+                standalone
+                keywords={keywords}
+                destroyOnUnmount
+            />
+        </div>
+    );
+}
+
+export default BrandPage;
+```
+
+#### Inactive AdSlot example
+
+```tsx
+import { AdSlot, useRelevantDigital } from "@smg-automotive/advertisement-pkg";
+
+const keywords = { page: ['home'], site: ['yoursite.ch'], foo: "bar" };
+
+const HomePage = () => {
+	useRelevantDigital({ keywords });
+	
+	return (
+		<div>
+			<AdSlot adUnitId={1234567} id="home-top-banner" />
+		</div>
+	);
+}
+
+export default HomePage;
+```
+
+### Lazy loading
+
+Is set per placement slot in Relevant Yield dashboard for detailed instructions check here [Reloads and Lazy loads in HB Manager](https://help.relevant-digital.com/knowledge/reloads-in-hb-manager)
+
+### Placement size depending on viewport size
+
+Also covered in Relevant Yield dashboard.
+
+### Debugging
+
+Set URL param:
+
+- `?debugAdScripts=true` - activate debugging for `react-relevant` library together with prebid (`pbjs`) and xanrd (`apntag`)
+- `?ast_test=true` - we need to add when testing mobile web through simulation on a desktop device (else test with actual mobile device)
+- `?pbjs_debug=true` - debug only prebid
+- `?ast_test=true` - if we suddenly start getting `AdBadRequest` on testing environment, we probably got blocked by Xandr, in that case we should add this to URL
+
+## Analytics
+
+Is injected automatically with relevant ad-stack. Chances are that is already set, but if not check [Overview of setting up HB Analytics](https://help.relevant-digital.com/knowledge/how-to-setup-hb-analytics)
+Can be customized per-site in Relevant Yield dashboard like: "Publisher accounts" > "SMG" (Edit button) > Tutti (or other site) "Programmatic tag" > expand "Custom Global JavaScript code". More in [Adding Custom Dimensions](https://help.relevant-digital.com/knowledge/adding-custom-dimensions)
+
 ## Development
@@ -13,0 +125,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

158388

increased by5.54%

Number of package files

36

increased by20%

Lines of code

1415

increased by3.74%

Number of lines in readme file

141

increased by386.21%

No dependency changes