@schibsted/niche-ads - npm Package Compare versions

Comparing version 3.0.6 to 3.1.0

dist/AdContext.js

@@ -35,3 +35,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function AdContextProvider(param) {
-    let { adsConfig , cdn , children , cogwheelCdn , device , wallpaper , glimr  } = param;
+    let { adsConfig , cdn , children , cogwheelCdn , device , wallpaper , glimr , eids  } = param;
     const adScriptsReady = useRef(false);
@@ -45,2 +45,3 @@ const placements = useRef({});
     const adsEventTarget = useRef(getEventTarget());
+    const ppids = useRef();
     const sendEvent = useCallback((targetId, placement, placementConfig)=>{
@@ -89,3 +90,3 @@ adsEventTarget.current.dispatchEvent(new CustomEvent(targetId, {
         await scriptsLoadPromise.current;
-        if (!device || !adScriptsReady.current) {
+        if (!device || !adScriptsReady.current || eids.required && ppids.current === undefined) {
             retryLoadAds.current = {
@@ -118,2 +119,19 @@ pageType,
         };
+        if (ppids.current?.PPID1 && ppids.current?.PPID2) {
+            pageOptions.user.userIds = [
+                {
+                    type: 'extendedIDs',
+                    eids: [
+                        {
+                            id: ppids.current.PPID1,
+                            source: `${eids.region}-UserHash`
+                        },
+                        {
+                            id: ppids.current.PPID2,
+                            source: `${eids.region}-EnvHash`
+                        }
+                    ]
+                }
+            ];
+        }
         if (glimr.enabled && await glimr.shouldLoad()) {
@@ -215,2 +233,13 @@ const { getGlimrTags  } = await import('./utils/glimr');
     useEffect(()=>{
+        adsEventTarget.current.addEventListener('ppids', (e)=>{
+            ppids.current = e.detail;
+            if (eids.required) {
+                handleLoadAdsReload();
+            }
+        });
+    }, [
+        handleLoadAdsReload,
+        eids.required
+    ]);
+    useEffect(()=>{
         scriptsLoadPromise.current = Promise.all([
@@ -340,2 +369,9 @@ loadScript(cdn, 'adsScript'),
     ]),
+    eids: PropTypes.shape({
+        required: PropTypes.bool.isRequired,
+        region: PropTypes.oneOf([
+            'SCHNO',
+            'SCHSE'
+        ]).isRequired
+    }),
     glimr: PropTypes.shape({
@@ -358,2 +394,6 @@ enabled: PropTypes.bool.isRequired,
     device: null,
+    eids: {
+        required: false,
+        region: 'SCHNO'
+    },
     glimr: {
@@ -360,0 +400,0 @@ enabled: false,

package.json

 {
     "name": "@schibsted/niche-ads",
-    "version": "3.0.6",
+    "version": "3.1.0",
     "description": "Package containing ads logic reappearing across our projects",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -41,3 +41,3 @@ # Niche ads
 ```js
-config.resolve.alias.react = path.resolve("./node_modules/react");
+config.resolve.alias.react = path.resolve('./node_modules/react');
 ```
@@ -80,10 +80,10 @@
 ```js
-import { AdContextProvider } from "@schibsted/niche-ads";
+import { AdContextProvider } from '@schibsted/niche-ads';
 
 function SomeComponent({ children, adsConfig, device }) {
-  return (
-    <AdContextProvider adsConfig={publicRuntimeConfig.ads} device={device}>
-      {children}
-    </AdContextProvider>
-  );
+    return (
+        <AdContextProvider adsConfig={publicRuntimeConfig.ads} device={device}>
+            {children}
+        </AdContextProvider>
+    );
 }
@@ -96,17 +96,26 @@
 
-- **device** - required - string - one of `desktop`, `tablet`, `mobile`
-- **adsConfig** - required - object - ads configuration object
-  - **options** - required - object
-    - **member** - number - required - member client id
-    - other options to pass to appnexus, for example `disablePsa` or `enableSafeFrame`
-  - **keywords** - optional - object - keywords to pass to different placements, see example
-  - **placements** - required - object - placements to render, see example
-- **cdn** - optional - string - defaults to `https://acdn.adnxs.com/ast/ast.js`
-- **children** - required - react node - react children to render
-- **cogwheelCdn** - optional - string - defaults to `https://cogwheel.inventory.schibsted.io/prod/latest/gdpr-bundle.js`
-- **wallpaper** - optional - object - configuration for wallpaper ad
-  - **enabled** - required - boolean - defaults to `false`
-  - **setWallpaperFunction** - required (if enabled is true) - function - callback to set image as a page background, you will get url as a parameter
-  - **setBackgroundColorFunction** - required (if enabled is true) - callback to set color as a page background, you will get color as a parameter
-  - **enabled** - required - boolean - defaults to `false`
+-   **device** - required - string - one of `desktop`, `tablet`, `mobile`
+-   **adsConfig** - required - object - ads configuration object
+    -   **options** - required - object
+        -   **member** - number - required - member client id
+        -   other options to pass to appnexus, for example `disablePsa` or `enableSafeFrame`
+    -   **keywords** - optional - object - keywords to pass to different placements, see example
+    -   **placements** - required - object - placements to render, see example
+-   **cdn** - optional - string - defaults to `https://acdn.adnxs.com/ast/ast.js`
+-   **children** - required - react node - react children to render
+-   **cogwheelCdn** - optional - string - defaults to `https://cogwheel.inventory.schibsted.io/prod/latest/gdpr-bundle.js`
+-   **wallpaper** - optional - object - configuration for wallpaper ad
+    -   **enabled** - required - boolean - defaults to `false`
+    -   **setWallpaperFunction** - required (if enabled is true) - function - callback to set image as a page background, you will get url as a parameter
+    -   **setBackgroundColorFunction** - required (if enabled is true) - callback to set color as a page background, you will get color as a parameter
+    -   **enabled** - required - boolean - defaults to `false`
+-   **glimr**
+    -   **enabled** - required - boolean - defaults to `false`
+    -   **shouldLoad** - required - funciton - async function returning boolean, this is used to opt out for example by checking privacy permissions
+    -   **clientId** - optional - string - glimr client id
+    -   **localStorageKey** - optional - string - defaults to `glimrTags`
+    -   **localStorageExpiration** - optional - number - defaults to `24 * 60 * 60 * 1000` (24h)
+-   **eids** - optional - object - config for eids
+    -   **required** - required - boolean - defaults to `false`, waits with ad request until eids are given
+    -   **region** - required - string - defaults to `SCHNO` - region of the user, either `SCHNO` or `SCHSE`
 
@@ -209,5 +218,5 @@ ##### Example adsConfig
 const setWallpaper = (url) => {
-  document.body.style.backgroundImage = `url(${url})`;
-  document.body.style.backgroundRepeat = "no-repeat";
-  document.body.style.backgroundAttachment = "fixed";
+    document.body.style.backgroundImage = `url(${url})`;
+    document.body.style.backgroundRepeat = 'no-repeat';
+    document.body.style.backgroundAttachment = 'fixed';
 };
@@ -220,4 +229,16 @@ ```
 export const setBackgroundColour = (colour) => {
-  document.body.style.backgroundColor = colour;
+    document.body.style.backgroundColor = colour;
 };
 ```
+
+## How to pass pulse ads identifiers
+
+Xandr now accepts pulse identifiers, to set them you will have to call `ppids` event on `adsEventTarget` with `{PPID1, PPID2}` object in details. You can do it like this:
+
+```js
+const [PPID1, PPID2] = await Promise.all([pulseInstance.getXandrPPID1(), pulseInstance.getXandrPPID2()]);
+
+adsEventTarget.dispatchEvent(new CustomEvent('ppids', { detail: { PPID1, PPID2 } }));
+```
+
+To check if they are working you can look for `eids` property in request for ads.

src/AdContext.js

@@ -52,3 +52,3 @@ import { createContext, useMemo, useRef, useEffect, useCallback } from 'react';
 
-function AdContextProvider({ adsConfig, cdn, children, cogwheelCdn, device, wallpaper, glimr }) {
+function AdContextProvider({ adsConfig, cdn, children, cogwheelCdn, device, wallpaper, glimr, eids }) {
     const adScriptsReady = useRef(false);
@@ -62,2 +62,3 @@ const placements = useRef({});
     const adsEventTarget = useRef(getEventTarget());
+    const ppids = useRef();
 
@@ -119,3 +120,3 @@ const sendEvent = useCallback((targetId, placement, placementConfig) => {
 
-        if (!device || !adScriptsReady.current) {
+        if (!device || !adScriptsReady.current || (eids.required && ppids.current === undefined)) {
             retryLoadAds.current = { pageType, keywords, allowlist, blocklist };
@@ -148,2 +149,14 @@
 
+        if (ppids.current?.PPID1 && ppids.current?.PPID2) {
+            pageOptions.user.userIds = [
+                {
+                    type: 'extendedIDs',
+                    eids: [
+                        { id: ppids.current.PPID1, source: `${eids.region}-UserHash` },
+                        { id: ppids.current.PPID2, source: `${eids.region}-EnvHash` },
+                    ],
+                },
+            ];
+        }
+
         if (glimr.enabled && (await glimr.shouldLoad())) {
@@ -249,2 +262,11 @@ const { getGlimrTags } = await import('./utils/glimr');
     useEffect(() => {
+        adsEventTarget.current.addEventListener('ppids', (e) => {
+            ppids.current = e.detail;
+            if (eids.required) {
+                handleLoadAdsReload();
+            }
+        });
+    }, [handleLoadAdsReload, eids.required]);
+
+    useEffect(() => {
         scriptsLoadPromise.current = Promise.all([
@@ -368,2 +390,6 @@ loadScript(cdn, 'adsScript'),
     device: PropTypes.oneOf(['desktop', 'tablet', 'mobile']),
+    eids: PropTypes.shape({
+        required: PropTypes.bool.isRequired,
+        region: PropTypes.oneOf(['SCHNO', 'SCHSE']).isRequired,
+    }),
     glimr: PropTypes.shape({
@@ -387,2 +413,6 @@ enabled: PropTypes.bool.isRequired,
     device: null,
+    eids: {
+        required: false,
+        region: 'SCHNO',
+    },
     glimr: {
@@ -389,0 +419,0 @@ enabled: false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46761

increased by8.1%

Lines of code

934

increased by7.85%

Number of lines in readme file

240

increased by9.59%

No dependency changes