Mindful Web Marko Wrapper for Prestitial Ads

Installation

1. Include @mindful-web/marko-web-prestitial-ad as a project/website dependency.

2. Include the Browser plugin.

// your-site/browser/index.js
import PrestitialAd from '@mindful-web/marko-web-prestitial-ad/browser';

PrestitialAd(Browser);

export default Browser;

3. Include the styles.

// your-site/server/styles/index.scss
@import "@mindful-web/marko-web-prestitial-ad/scss/prestitial-ad";

Usage

Include the <marko-web-prestitial-ad> component in your out-of-page ads template or document root.

<!-- your-site/server/components/out-of-page-ads.marko -->
$ const { site } = out.global;

<marko-web-prestitial-ad
  namespace=site.get('mindfulAds.namespace')
  ad-unit-id=site.get('mindfulAds.adUnits.prestitial._id')
  logo-src=site.get('mindfulAds.adUnits.prestitial.logo.src')
  logo-srcset=site.get('mindfulAds.adUnits.prestitial.logo.srcset')
  logo-width=site.get('mindfulAds.adUnits.prestitial.logo.width')
  logo-height=site.get('mindfulAds.adUnits.prestitial.logo.height')

  -- Optional inputs with default values
  ad-unit-sizes=site.get('mindfulAds.adUnits.prestitial.sizes', [[500, 500]])
  duration=site.get('mindfulAds.adUnits.prestitial.duration', 15)
  cookie-name=site.get('mindfulAds.adUnits.prestitial.cookieName', 'prestitialState')
  cookie-expiration-days=site.get('mindfulAds.adUnits.prestitial.cookieExpiration', 1)
/>

The component will only render when:

• No cookie matching cookie-name is present for the current visitor
• The configured ad unit exists and returns a filled result

Once displayed, a countdown timer is shown (default 15 seconds, configurable via duration). The visitor can dismiss the overlay at any time via the "Continue to Site" link. On dismiss (or countdown expiry), the cookie is set to suppress the ad for the configured cookie-expiration-days period (default: 1 day).

Attributes

| Attribute | Type | Required | Description | |-----------|------|----------|-------------| | ad-unit-id | String | Yes | Ad unit ID | | namespace | String | Yes | Mindful Ads namespace | | logo-src | String | Yes | Logo src displayed in the overlay header | | ad-unit-sizes | Array | No | Ad sizes (default: []) | | cookie-expiration-days | Number | No | Days to suppress after first display (default: 1) | | cookie-name | String | No | Cookie name used to suppress repeat displays (default: prestitialState) | | debug | Boolean | No | If enabled, log input (default: false) | | duration | Number | No | Countdown seconds before auto-dismiss (default: 15) | | force | Boolean | No | If enabled, bypass cookie check (default: false) | | logo-height | String | No | Logo height attribute | | logo-srcset | Array | No | Logo srcset values for HiDPI displays (default: []) | | logo-width | String | No | Logo width attribute |

Site Config Example

{
  mindfulAds: {
    namespace: 'your-namespace',
    adUnits: {
      prestitial: {
        _id: 'your-ad-unit-id',
        sizes: [[300, 250]],
        limit: 1,
        cookieExpiration: 1,
        cookieName: 'prestitialState',
        duration: 15,
        debug: false,
        logo: {
          src: 'https://example.com/logo.png',
          srcset: 'https://example.com/[email protected] 2x',
          height: '40px',
          width: '156px',
        },
      },
    },
  },
}