feat: core react component for google publisher tag ads - removed pac…

…kage-lock from commit

packages/core/package.json

@@ -57,6 +57,7 @@
     "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {
+    "@10up/react-hooks": "^1.2.3",
     "@justinribeiro/lite-youtube": "^1.3.1",
     "html-react-parser": "^3.0.4",
     "path-to-regexp": "^6.2.0",

packages/core/src/react/components/AdvertGPT.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect } from 'react';
+import { useScript } from '@10up/react-hooks/src/useScript/useScript';
+
+type GPTProps = {
+	adUnitPath: string;
+	sizes: Array<Array<number>>;
+	divId: string;
+	targeting?: Record<string, string>;
+	enableSra?: boolean;
+	minWidth?: number;
+	minHeight?: number;
+};
+
+declare global {
+	interface Window {
+		googletag: any;
+		enableSra?: boolean;
+	}
+}
+
+const AdvertGPT: React.FC<GPTProps> = ({
+	adUnitPath,
+	sizes,
+	divId,
+	targeting = {},
+	enableSra = false,
+	minWidth = 0,
+	minHeight = 0,
+}): JSX.Element => {
+	const [scriptLoaded] = useScript(
+		'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
+		0,
+		'head',
+	);
+
+	useEffect(() => {
+		if (typeof window !== 'undefined' && scriptLoaded) {
+			const { googletag } = window;
+			googletag.cmd.push(() => {
+				const slot = googletag.defineSlot(adUnitPath, sizes, divId);
+				for (const [key, value] of Object.entries(targeting)) {
+					slot.setTargeting(key, value);
+				}
+				slot.addService(googletag.pubads());
+				if (enableSra) {
+					googletag.pubads().enableSingleRequest();
+					window.enableSra = true;
+				}
+				googletag.enableServices();
+				googletag.display(divId);
+			});
+		}
+	}, [adUnitPath, sizes, targeting, enableSra, divId, scriptLoaded]);
+
+	const style: React.CSSProperties = {
+		minWidth: minWidth ? `${minWidth}px` : 'auto',
+		minHeight: minHeight ? `${minHeight}px` : 'auto',
+	};
+
+	return <div id={divId} style={style} />;
+};
+
+export default AdvertGPT;

packages/hooks/src/useScript/useScript.ts

@@ -20,9 +20,10 @@ function flushCache(optionalKey?: string) {
  *
  * @param {string} src   - script needed to load on page
  * @param {number} delay - whether to delay script load
+ * @param {options} options - target for script to be appended
  * @returns {[boolean, boolean]} [loading, error]
  */
-export function useScript(src: string, delay = 0) {
+export function useScript(src: string, delay = 0, position: 'head' | 'body' = 'body') {
 	// Keeping track of script loaded and error state
 	const [state, setState] = useState({
 		loaded: false,
@@ -58,15 +59,19 @@ export function useScript(src: string, delay = 0) {
 				script.addEventListener('load', onScriptLoad);
 				script.addEventListener('error', onScriptError);
 
+				let target: HTMLElement = document.body;
+				if (position !== undefined) {
+					target = document[position] ?? document.body;
+				}
 				// Add script to document body
 				if (delay) {
 					setTimeout(() => {
 						if (isMounted) {
-							document.body.appendChild(script);
+							target.appendChild(script);
 						}
 					}, delay);
 				} else {
-					document.body.appendChild(script);
+					target.appendChild(script);
 				}
 			});
 		}
@@ -93,7 +98,7 @@ export function useScript(src: string, delay = 0) {
 		return () => {
 			isMounted = false;
 		};
-	}, [src, delay]);
+	}, [src, delay, position]);
 
 	return [state.loaded, state.error, flushCache];
 }