So basically I’m trying to render two AD banners onto my site and I currently have the code given below
The issue I am facing is that I can’t seem to render both of them together, only the one which seems to load first renders on the website, is there any fix for this?
import React, { useEffect, useRef } from "react";
const Banner: React.FC = () => {
const bannerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (bannerRef.current && !bannerRef.current.firstChild) {
const conf = document.createElement("script");
conf.type = "text/javascript";
conf.innerHTML = `
var atOptions = {
'key' : '00fc6d1f1a49f06a2da433bb48036dad',
'format' : 'iframe',
'height' : 60,
'width' : 468,
'params' : {}
};
`;
const script = document.createElement("script");
script.type = "text/javascript";
script.src =
"//www.topcreativeformat.com/{atOptions.key}/invoke.js";
bannerRef.current.appendChild(conf);
bannerRef.current.appendChild(script);
}
}, []);
return <div ref={bannerRef}></div>;
};
export default Banner;
This is banner.tsx and a similar for banner2.tsx:
const Banner2: React.FC = () => {
const bannerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (bannerRef.current && !bannerRef.current.firstChild) {
const conf = document.createElement("script");
conf.type = "text/javascript";
conf.innerHTML = `
var atOptions = {
'key' : '5f77e2799a05fdc5f3736fe05816d8ff',
'format' : 'iframe',
'height' : 300,
'width' : 160,
'params' : {}
};
`;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "//www.topcreativeformat.com/{atOptions.key}/invoke.js";
bannerRef.current.appendChild(conf);
bannerRef.current.appendChild(script);
}
}, []);
return <div ref={bannerRef}></div>;
};
Was expecting two ADs to be rendered, try different fixes, also from CHATGPT, doesn’t seem to help
New contributor
SharKolosimus is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.