Show placeholder ad when site ads status is pending or in-review (#2529)

Author: spastorelli

packages/gitbook/src/components/Ads/Ad.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { SiteAds, SiteAdsStatus } from '@gitbook/api';
 import * as React from 'react';
 
 import { t, useLanguage } from '@/intl/client';
@@ -21,6 +22,7 @@ export function Ad({
  spaceId,
  placement,
  ignore,
+ siteAdsStatus,
  style,
  mode = 'auto',
 }: {
@@ -29,6 +31,7 @@ export function Ad({
  placement: string;
  ignore: boolean;
  style?: ClassValue;
+ siteAdsStatus?: SiteAds['status'];
  mode?: 'classic' | 'auto' | 'cover';
 }) {
  const containerRef = React.useRef<HTMLDivElement>(null);
@@ -70,8 +73,14 @@ export function Ad({
 
  let cancelled = false;
 
- const preview = new URL(window.location.href).searchParams.has('ads_preview');
+ const previewParam = new URL(window.location.href).searchParams.get('ads_preview');
+ const preview = !!previewParam;
  const realZoneId = preview ? PREVIEW_ZONE_ID : zoneId;
+ const showPlaceholderAd =
+ previewParam === 'placeholder' ||
+ (siteAdsStatus &&
+ (siteAdsStatus === SiteAdsStatus.Pending ||
+ siteAdsStatus === SiteAdsStatus.InReview));
 
  if (!realZoneId) {
  return;
@@ -83,6 +92,7 @@ export function Ad({
  ignore: ignore || preview,
  zoneId: realZoneId,
  mode,
+ source: showPlaceholderAd ? 'placeholder' : 'live',
  });
 
  if (cancelled) {
@@ -97,7 +107,7 @@ export function Ad({
  return () => {
  cancelled = true;
  };
- }, [visible, zoneId, ignore, placement, mode]);
+ }, [visible, zoneId, ignore, placement, mode, siteAdsStatus]);
 
  const viaUrl = new URL('https://www.gitbook.com');
  viaUrl.searchParams.set('utm_source', 'content');

packages/gitbook/src/components/Ads/assets/ad-rainbow.svg

@@ -5,6 +5,7 @@ import { headers } from 'next/headers';
 import { AdClassicRendering } from './AdClassicRendering';
 import { AdCoverRendering } from './AdCoverRendering';
 import { AdPixels } from './AdPixels';
+import adRainbow from './assets/ad-rainbow.svg';
 import { AdItem, AdsResponse } from './types';
 
 interface FetchAdOptions {
@@ -16,6 +17,12 @@ interface FetchAdOptions {
  placement: string;
  /** If true, we'll not track it as an impression */
  ignore: boolean;
+ /**
+ * Source of the ad (live: from the platform, placeholder: static placeholder)
+ *
+ * Defaults to live.
+ * */
+ source?: 'live' | 'placeholder';
 }
 
 /**
@@ -24,8 +31,9 @@ interface FetchAdOptions {
  * and properly access user-agent and IP.
  */
 export async function renderAd(options: FetchAdOptions) {
- const { mode } = options;
- const result = await fetchAd(options);
+ const { mode, source = 'live' } = options;
+
+ const result = source === 'live' ? await fetchAd(options) : getPlaceholderAd();
  if (!result || !result.ad.description || !result.ad.statlink) {
  return null;
  }
@@ -49,15 +57,7 @@ async function fetchAd({
  placement,
  ignore,
 }: FetchAdOptions): Promise<{ ad: AdItem; ip: string } | null> {
- const headersSet = headers();
- const ip =
- headersSet.get('x-gitbook-ipv4') ??
- headersSet.get('x-gitbook-ip') ??
- headersSet.get('cf-pseudo-ipv4') ??
- headersSet.get('cf-connecting-ip') ??
- headersSet.get('x-forwarded-for') ??
- '';
- const userAgent = headersSet.get('user-agent') ?? '';
+ const { ip, userAgent } = getUserAgentAndIp();
 
  const url = new URL(`https://srv.buysellads.com/ads/${zoneId}.json`);
  url.searchParams.set('segment', `placement:${placement}`);
@@ -78,3 +78,49 @@ async function fetchAd({
 
  return null;
 }
+
+function getPlaceholderAd(): { ad: AdItem; ip: string } {
+ const { ip } = getUserAgentAndIp();
+
+ return {
+ ad: {
+ active: '1',
+ ad_via_link: '',
+ bannerid: '',
+ creativeid: '',
+ description:
+ 'Your docs could be this good.\nPublish incredible open source docs for free with GitBook',
+ evenodd: '0',
+ external_id: '',
+ height: '0',
+ i: '0',
+ identifier: '',
+ longimp: '',
+ longlink: '',
+ num_slots: '1',
+ rendering: 'carbon',
+ smallImage: adRainbow.src,
+ statimp: '',
+ statlink: 'https://www.gitbook.com/solutions/open-source',
+ timestamp: Date.now().toString(),
+ width: '0',
+ zoneid: '',
+ zonekey: '',
+ },
+ ip,
+ };
+}
+
+function getUserAgentAndIp() {
+ const headersSet = headers();
+ const ip =
+ headersSet.get('x-gitbook-ipv4') ??
+ headersSet.get('x-gitbook-ip') ??
+ headersSet.get('cf-pseudo-ipv4') ??
+ headersSet.get('cf-connecting-ip') ??
+ headersSet.get('x-forwarded-for') ??
+ '';
+ const userAgent = headersSet.get('user-agent') ?? '';
+
+ return { ip, userAgent };
+}

packages/gitbook/src/components/Ads/renderAd.tsx

@@ -190,6 +190,7 @@ export async function PageAside(props: {
  }
  placement="page.aside"
  spaceId={space.id}
+ siteAdsStatus={site?.ads && site.ads.status ? site.ads.status : undefined}
  ignore={process.env.NODE_ENV !== 'production'}
  style={tcls('mt-4')}
  />