goopubtag
Version:
React library for Google Publisher tag
790 lines (776 loc) • 26.4 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// index.ts
var goopubtag_exports = {};
__export(goopubtag_exports, {
GPTProvider: () => GPTProvider,
GPTSlot: () => GPTSlot,
GUIDELINES: () => GUIDELINES,
useGPT: () => useGPT
});
module.exports = __toCommonJS(goopubtag_exports);
// lib/contexts/GPTProvider.tsx
var import_react2 = require("react");
// lib/hooks/useGPTProviderInternal.tsx
var import_react = require("react");
// lib/constants/script.ts
var GPT_SCRIPT_SRC = {
STANDARD: "https://securepubads.g.doubleclick.net/tag/js/gpt.js",
LIMITED_ADS: "https://pagead2.googlesyndication.com/tag/js/gpt.js"
};
// lib/utils/index.ts
var getSrc = (limitedAds) => {
if (limitedAds)
return GPT_SCRIPT_SRC.LIMITED_ADS;
else
return GPT_SCRIPT_SRC.STANDARD;
};
var getGPTScript = (props) => {
const { limitedAds } = props;
const gptScript = document.createElement("script");
gptScript.src = getSrc(limitedAds);
gptScript.async = true;
gptScript.type = "text/javascript";
return gptScript;
};
// lib/hooks/useGPTProviderInternal.tsx
var useGPTProviderInternal = (props) => {
const [isLoaded, setIsLoaded] = (0, import_react.useState)(false);
const [units, setUnits] = (0, import_react.useState)([]);
const {
networkId,
limitedAds = false,
fallback = "default",
targetingArguments,
outOfPage
} = props;
const addUnit = (unit) => setUnits((prev) => [...prev, unit]);
const getOutOfPageSlotId = (outOfPage2) => {
switch (outOfPage2.type) {
case "anchor": {
if (outOfPage2.settings.position === "top") {
return window.googletag?.enums.OutOfPageFormat.TOP_ANCHOR;
} else {
return window.googletag?.enums.OutOfPageFormat.BOTTOM_ANCHOR;
}
}
case "rewarded": {
return window.googletag?.enums.OutOfPageFormat.REWARDED;
}
default: {
return null;
}
}
};
(0, import_react.useEffect)(() => {
const gptScript = getGPTScript({ limitedAds });
gptScript.addEventListener("load", () => setIsLoaded(true));
document.getElementsByTagName("head")[0].appendChild(gptScript);
}, []);
(0, import_react.useEffect)(() => {
if (isLoaded) {
window.googletag?.cmd.push(() => {
if (outOfPage) {
const { settings } = outOfPage;
const adUnitPath = `/${networkId}/${settings.adUnit}`;
let unit = window.googletag?.defineOutOfPageSlot(adUnitPath, getOutOfPageSlotId(outOfPage))?.addService(window?.googletag?.pubads());
if (unit && settings.targetingArguments) {
Object.keys(settings.targetingArguments).forEach((tagetingKey) => {
unit.setTargeting(
tagetingKey,
settings.targetingArguments[tagetingKey]
);
});
unit.addService(window.googletag?.pubads());
if (outOfPage.type === "rewarded") {
window.googletag?.pubads().addEventListener(
"rewardedSlotReady",
outOfPage.settings.onReady
);
window.googletag?.pubads().addEventListener(
"rewardedSlotClosed",
outOfPage.settings.onClosed
);
window.googletag?.pubads().addEventListener(
"rewardedSlotGranted",
outOfPage.settings.onGranted
);
}
}
}
if (targetingArguments) {
Object.keys(targetingArguments).forEach((tagetingKey) => {
window.googletag?.pubads().setTargeting(tagetingKey, targetingArguments[tagetingKey]);
});
}
if (fallback && fallback !== "default") {
switch (fallback) {
case "collapse": {
window.googletag?.pubads().collapseEmptyDivs();
break;
}
case "expand": {
window.googletag?.pubads().collapseEmptyDivs(true);
break;
}
default: {
break;
}
}
}
});
}
}, [isLoaded]);
return {
isLoaded,
addUnit,
units
};
};
// lib/components/GPTDevIcon.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var GooPubTagIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: 56,
height: 56,
viewBox: "0 0 270.933 270.933",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"filter",
{
id: "b",
width: 1.795,
height: 1.354,
x: -0.493,
y: -0.214,
style: {},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feFlood", { floodColor: "#000", floodOpacity: 0.243, result: "flood" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"feComposite",
{
in: "flood",
in2: "SourceGraphic",
operator: "in",
result: "composite1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "composite1", result: "blur", stdDeviation: 10 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: -15.109, dy: -12.617, result: "offset" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feComposite", { in: "SourceGraphic", in2: "offset", result: "composite2" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"filter",
{
id: "a",
width: 1.819,
height: 1.335,
x: -0.516,
y: -0.195,
style: {},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feFlood", { floodColor: "#000", floodOpacity: 0.243, result: "flood" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"feComposite",
{
in: "flood",
in2: "SourceGraphic",
operator: "in",
result: "composite1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", { in: "composite1", result: "blur", stdDeviation: 10 }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feOffset", { dx: -16.978, dy: -9.502, result: "offset" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feComposite", { in: "SourceGraphic", in2: "offset", result: "composite2" })
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"g",
{
style: {
display: "inline"
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"g",
{
style: {
display: "inline",
opacity: 1
},
transform: "rotate(-20.363 177.66 214.553)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"rect",
{
width: 79.375,
height: 132.292,
x: 87.28,
y: 70.478,
rx: 13.79,
ry: 11.742,
style: {
opacity: 1,
fill: "#4249d0",
fillOpacity: 1,
stroke: "#604d29",
strokeWidth: 0
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M126.36 31.374c-3.717.064-7.878 2.154-12.028 8.231l-.007.01-6.626 9.71-19.38 28.398 38.648.055 38.647.056-19.267-28.455-6.612-9.764s-5.758-8.372-13.375-8.241zm.864 16.092a9.803 10.294 0 0 1 2.28.348 9.803 10.294 0 0 1 6.932 12.606 9.803 10.294 0 0 1-12.005 7.28 9.803 10.294 0 0 1-6.932-12.606l9.468 2.662-9.468-2.663a9.803 10.294 0 0 1 8.955-7.616 9.803 10.294 0 0 1 .77-.01z",
style: {
opacity: 1,
fill: "#4249d0",
fillOpacity: 1,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
}
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
xmlSpace: "preserve",
x: 184.785,
y: -27.732,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontSize: "25.4px",
fontFamily: """,
display: "inline",
opacity: 1,
fill: "#141c9f",
fillOpacity: 0.768627,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
},
transform: "rotate(68.298)",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"tspan",
{
x: 184.785,
y: -27.732,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontFamily: """,
fill: "#141c9f",
fillOpacity: 0.768627,
strokeWidth: 0
},
children: "TAG"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"g",
{
style: {
display: "inline",
opacity: 0.9,
filter: "url(#a)"
},
transform: "rotate(-60.67 129.82 122.094)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"rect",
{
width: 79.375,
height: 132.292,
x: 95.779,
y: 69.321,
rx: 13.79,
ry: 11.742,
style: {
opacity: 1,
fill: "#22278b",
fillOpacity: 1,
stroke: "#604d29",
strokeWidth: 0
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M134.86 30.216c-3.718.064-7.879 2.154-12.029 8.232l-.007.01-6.625 9.709-19.38 28.398 38.647.055 38.648.056-19.268-28.455-6.612-9.764s-5.758-8.372-13.374-8.24zm.863 16.093a9.803 10.294 0 0 1 2.28.347 9.803 10.294 0 0 1 6.932 12.607 9.803 10.294 0 0 1-12.005 7.28 9.803 10.294 0 0 1-6.932-12.607l9.469 2.663-9.469-2.664a9.803 10.294 0 0 1 8.955-7.615 9.803 10.294 0 0 1 .77-.011z",
style: {
opacity: 1,
fill: "#22278b",
fillOpacity: 1,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
}
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
xmlSpace: "preserve",
x: 182.305,
y: 46.888,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontSize: "25.4px",
fontFamily: """,
display: "inline",
opacity: 1,
fill: "#0c0e57",
fillOpacity: 0.768627,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
},
transform: "rotate(30.23)",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"tspan",
{
x: 182.305,
y: 46.888,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontFamily: """,
fill: "#0c0e57",
fillOpacity: 0.768627,
strokeWidth: 0
},
children: "PUB"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"g",
{
style: {
display: "inline",
opacity: 0.85,
filter: "url(#b)"
},
transform: "rotate(-97.4 118.082 97.204)",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"rect",
{
width: 79.375,
height: 132.292,
x: 95.779,
y: 69.321,
rx: 13.79,
ry: 11.742,
style: {
opacity: 0.9,
fill: "#2d36e5",
fillOpacity: 1,
stroke: "#604d29",
strokeWidth: 0
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M134.86 30.216c-3.718.064-7.879 2.154-12.029 8.232l-.007.01-6.625 9.709-19.38 28.398 38.647.055 38.648.056-19.268-28.455-6.612-9.764s-5.758-8.372-13.374-8.24zm.863 16.093a9.803 10.294 0 0 1 2.28.347 9.803 10.294 0 0 1 6.932 12.607 9.803 10.294 0 0 1-12.005 7.28 9.803 10.294 0 0 1-6.932-12.607l9.469 2.663-9.469-2.664a9.803 10.294 0 0 1 8.955-7.615 9.803 10.294 0 0 1 .77-.011z",
style: {
opacity: 0.9,
fill: "#2d36e5",
fillOpacity: 1,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
}
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"text",
{
xmlSpace: "preserve",
x: 135.099,
y: 97.69,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontSize: "25.4px",
fontFamily: """,
display: "inline",
opacity: 1,
fill: "#121581",
fillOpacity: 0.768627,
stroke: "#64a1bd",
strokeWidth: 0,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 1
},
transform: "rotate(-5.23)",
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"tspan",
{
x: 135.099,
y: 97.69,
style: {
fontStyle: "normal",
fontVariant: "normal",
fontWeight: 400,
fontStretch: "normal",
fontFamily: """,
fill: "#121581",
fillOpacity: 0.768627,
strokeWidth: 0
},
children: "GOO"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"ellipse",
{
cx: 75.247,
cy: 83.959,
fill: "none",
rx: 9.858,
ry: 9.195,
style: {
opacity: 1,
fill: "#141c9f",
fillOpacity: 0,
stroke: "#161b94",
strokeWidth: 4.61478,
strokeLinejoin: "round",
strokeDasharray: "none",
strokeOpacity: 0.94902
}
}
)
]
}
)
]
}
);
// lib/components/GPTDev.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var GPTDev = () => {
const openConsole = () => {
window.googletag?.openConsole();
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"div",
{
style: {
position: "fixed",
bottom: "8px",
right: "8px",
width: "56px",
height: "56px",
padding: "4px 4px 0px 4px",
display: "flex",
justifyContent: "center",
alignItems: "center",
borderRadius: "12px",
border: "1px dotted rebeccapurple",
backgroundColor: "#66339933",
zIndex: "9999"
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
onClick: openConsole,
style: {
all: "unset",
color: "white",
textAlign: "center",
cursor: "pointer"
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GooPubTagIcon, {})
}
)
}
);
};
// lib/contexts/GPTProvider.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var GPTContext = (0, import_react2.createContext)({});
var GPTProvider = (props) => {
const { children, ...gpt } = props;
const rest = useGPTProviderInternal(gpt);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(GPTContext.Provider, { value: { ...gpt, ...rest }, children: [
children,
gpt.debug && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GPTDev, {})
] });
};
var useGPTContext = () => (0, import_react2.useContext)(GPTContext);
// lib/hooks/useGPTSlotInternal.tsx
var import_react3 = require("react");
var useGPTSlotInternal = (props) => {
const {
adUnit,
sizes,
sizeMapping,
slotId,
isLoaded,
targetingArguments,
onSlotLoad,
onSlotIsViewable,
onSlotRenderEnded,
fallback = "default",
outOfPage = false
} = props;
const { networkId, addUnit } = useGPTContext();
const adUnitPath = `/${networkId}/${adUnit}`;
(0, import_react3.useEffect)(() => {
if (isLoaded) {
window.googletag?.cmd.push(() => {
let unit = null;
if (outOfPage) {
unit = window.googletag?.defineOutOfPageSlot(adUnitPath, slotId)?.addService(window?.googletag?.pubads());
} else {
unit = window.googletag?.defineSlot(adUnitPath, sizes, slotId)?.addService(window?.googletag?.pubads());
}
if (sizeMapping) {
const mapping = window.googletag?.sizeMapping();
sizeMapping.forEach(({ viewport, sizes: sizes2 }) => {
mapping.addSize(viewport, sizes2);
});
mapping.build();
unit.defineSizeMapping(mapping);
}
if (targetingArguments) {
Object.keys(targetingArguments).forEach((tagetingKey) => {
unit.setTargeting(tagetingKey, targetingArguments[tagetingKey]);
});
}
if (onSlotLoad) {
window.googletag?.pubads().addEventListener("slotOnload", onSlotLoad);
}
if (onSlotIsViewable) {
window.googletag?.pubads().addEventListener("impressionViewable", onSlotIsViewable);
}
if (onSlotRenderEnded) {
window.googletag?.pubads().addEventListener("slotRenderEnded", onSlotRenderEnded);
}
if (fallback && fallback !== "default") {
switch (fallback) {
case "expand": {
unit.setCollapseEmptyDiv(true, true);
break;
}
case "expand_strict": {
unit.setCollapseEmptyDiv(false);
break;
}
case "collapse": {
unit.setCollapseEmptyDiv(true);
break;
}
default:
break;
}
}
slotId && addUnit({ slotId, unit });
window.googletag?.enableServices();
window?.googletag?.display(slotId);
});
}
}, [isLoaded]);
const getStyle = () => {
if (!sizes)
return {};
if (typeof sizes === "string") {
return {
width: "100%"
};
} else if (Array.isArray(sizes[0])) {
return {
width: "100%"
};
} else {
return {
width: sizes[0],
height: sizes[1]
};
}
};
return { style: getStyle() };
};
// lib/components/GPTSlot.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var GPTSlot = (props) => {
const { slotId } = props;
const { isLoaded } = useGPTContext();
const { style } = useGPTSlotInternal({ ...props, isLoaded });
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { id: slotId, style });
};
// lib/hooks/useGPT.tsx
var useGPT = (props) => {
const { units, limitedAds } = useGPTContext();
const setTargetingAttributes = (slotId, attributes) => {
window.googletag?.cmd.push(() => {
const unit = units.find((unit2) => unit2.slotId === slotId)?.unit;
Object.keys(attributes).forEach((tagetingKey) => {
unit.setTargeting(tagetingKey, attributes[tagetingKey]);
});
});
};
const setPageTargetingAttributes = (attributes) => {
window.googletag?.cmd.push(() => {
Object.keys(attributes).forEach((tagetingKey) => {
window.googletag?.pubads().setTargeting(tagetingKey, attributes[tagetingKey]);
});
});
};
const clearTargetingAttributes = (slotId, attributes) => {
window.googletag?.cmd.push(() => {
const unit = units.find((unit2) => unit2.slotId === slotId)?.unit;
if (attributes) {
attributes.forEach((tagetingKey) => {
unit.clearTargeting(tagetingKey);
});
} else {
unit.clearTargeting();
}
});
};
const clearPageTargetingAttributes = (attributes) => {
window.googletag?.cmd.push(() => {
if (attributes) {
attributes.forEach((tagetingKey) => {
window.googletag?.pubads().clearTargeting(tagetingKey);
});
} else {
window.googletag?.pubads().clearTargeting();
}
});
};
const setPrivacySettings = (privacySettings) => {
if (!limitedAds && privacySettings.limitedAds !== void 0) {
throw new Error(
"limited ads must be enabled on GPTContext to set privacy settings"
);
} else {
window.googletag?.cmd.push(() => {
window.googletag?.pubads().setPrivacySettings(privacySettings);
});
}
};
const refresh = (adSlots) => {
window.googletag?.cmd.push(() => {
if (adSlots && adSlots.length !== 0) {
window.googletag?.pubads().refresh(adSlots);
} else {
window.googletag?.pubads().refresh();
}
});
};
return {
refresh,
setTargetingAttributes,
setPageTargetingAttributes,
clearTargetingAttributes,
clearPageTargetingAttributes,
setPrivacySettings
};
};
// lib/constants/guidelines.ts
var UNIT_SIZE = {
BILLBOARD: [970, 250],
SKYSCRAPER_WIDE: [300, 600],
SKYSCRAPER: [160, 600],
SKYSCRAPER_SLIM: [120, 600],
LEADERBOARD_XL: [970, 90],
LEADERBOARD_LARGE: [920, 90],
LEADERBOARD: [728, 90],
MPU: [320, 250],
MPU_300: [300, 250],
MOBILE_LEADERBOARD_LARGE: [468, 60],
MOBILE_LEADERBOARD_MEDIUM: [320, 100],
MOBILE_LEADERBOARD: [320, 50],
LINE_TEXT_UNIT: [280, 18],
ONE_BY_ONE: [1, 1],
BLANK: [0, 0],
FLUID: "fluid"
};
var SCREEN_SIZE = {
DESKTOP_LARGEST: [1220, 0],
DESKTOP_PLUS: [970, 0],
DESKTOP: [861, 0],
TABLET_PLUS: [728, 0],
TABLET: [600, 0],
MOBILE_PLUS: [468, 0],
MOBILE: [320, 0]
};
var GUIDELINES = {
UNIT_SIZE,
SCREEN_SIZE
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
GPTProvider,
GPTSlot,
GUIDELINES,
useGPT
});