AdSpirit Integration

adspirit is a trusted ad platform for premium publishers this guide will cover the key setup steps, configuration options, and best practices to ensure a smooth and compliant integration preconditions before starting the integration, ensure you have the following resources ready adspirit script url proper script url (usually it is default for all https //cdn adspirit de/adasync min js https //cdn adspirit de/adasync min js ) list of ads and there corresponding placements for desktop and mobile in design consent management ensure the cmp (consent management platform) is configured with vendors relevant to adspirit (including iab compliant vendor ids) "cdn adspirit de", "apoverlag adspirit de" use pxp version 3 8 8 and higher important notes adspirit ads can be tested even at localhost without any additional queryparams or configuration we don't need to trigger any consent given event, while adspirit reads it on their side adspirit require adsrefresh some customers use subscribtion plans to disable ads list of available ads with their ids https //adsprit example glitch me/ https //adsprit example glitch me/ !!! if conditional loading of ads for proper screens needed we need to have conditional loading in view\ json relying on $context device type and not a css based condition with display block/none how to guide 1\ experience config go to experience builder create or edit experience config default/storefront/assets/experience config json as adspirit manages consent on their side we don't need to add additional consent configuration to purple ads consent (for other ad services, which is not audienzz you might need to add vendorid and iabvendorid you find vendorid in your consent manager configurations and find iabvendorid here https //iabeurope eu/vendor list tcf/ https //iabeurope eu/vendor list tcf/ ) in ads adspirit configuration add proper script id adspirit header script and url https //cdn adspirit de/adasync min js https //cdn adspirit de/adasync min js to refresh adspirit ads dynamically, we need access to the loaded adspirit script adspirit provides its api via asm async data , which is a standard global object after the script loads we must pass asm async data as the scriptwinkey to reference it correctly to hide ads for subscribed users , we need to check for a specific window key that indicates whether the user is a premium subscriber the window key varies by project in the latest project , this key is cmp pur loggedin if window\[cmp pur loggedin] is true, ads should not be shown 2\ in default/storefront/assets , click on the 'ads json' file, or create one top level id can be anything specific to project params resides in content properties\["adspirit urlparameters"] coming from hub, should be set in builder as $context adspiritparams in url resolver json it can be set per article, and not per home page for example, so to properly handle this use some $function customchecker($context adspiritparams) to resolve to empty string if there is no $context adspiritparams defined example of setting of those adspiritparams in url resolver json 3\ final created ad element structure note this section is just to see what will be our resulted add from above configurations (no configurations part here) with crossed items to be configurable 1\) mobile tablet platform (it could be "desktop", "mobile", "tablet", "large desktop" or combined "mobile tablet") if configured in scss file (check adspirit scss file mentioned below ) this classes should not be used for conditional showing of the ads with display block/none 2\) space top 1 space bottom 2 configurations are also added in scss file for proper styling (check adspirit scss file mentioned below ) 3) pid= 12345 id of the ad proper ads and their ids can be found here 4) param1=value1 could be something like "special=no ad" and should be configured through builder and placed in from content properties\["adspirit urlparameters"] to $context adspiriturlparams or something similar can be added with or without "&" at the beginning of the string, other params add should match "&" structure in between of each query param "special=no ad & param1=value1" 5) styles width 300px & height auto width and height if not provided will be 100% and auto respectevely you should set them as number without px 4\ when adding to your page add item in proper place we should use conditional loading of mobile/tablet or desktop ads (check if project handles proper screen types like $context device type) 5\ you can also have styles configurations you can apply your ad specific styles like this /src/default/storefront/assets/scss/adspirit scss 6\ configure ads placement in your project according to mockups 7\ notes native ads are currently not covered in pxp code swiper ads are not covered in pxp code