I received an Ad Script that i need to include in my react app. The script tag runs in the body of the code and should load an image.
This is the tag im trying to insert.
<script type="text/adtag">
<ins class='dcmads' style='display:inline-block;width:300px;height:250px'
data-dcm-placement='N6246.289102DENTALPRODUCTSHOPPER/B27429766.334458108'
data-dcm-rendering-mode='script'
data-dcm-https-only
data-dcm-gdpr-applies='gdpr=${GDPR}'
data-dcm-gdpr-consent='gdpr_consent=${GDPR_CONSENT_755}'
data-dcm-addtl-consent='addtl_consent=${ADDTL_CONSENT}'
data-dcm-ltd='false'
data-dcm-resettable-device-id=''
data-dcm-app-id=''>
<script src='https://www.googletagservices.com/dcm/dcmads.js'></script>
</ins>
</script>
<script language="javascript" type="text/javascript" src="https://cdn.doubleverify.com/dvbs_src.js?ctx=2974662&cmp=27429766&plc=334458108&sid=7942714&dvregion=0&unit=300x250">
</script>Ive tried creating a component that inserts the tag as a child of a div
function Script(props) {
const ref = useRef()
useEffect(() => {
if (ref.current) {
const fragment = document.createRange().createContextualFragment(`<div>${props.innerHTML}</div>`)
ref.current.appendChild(fragment)
}
}, [ref])
return <div ref={ref} />
}And I've tried a few other things like using dangerouslysetinnerhtml but nothing seems to work.
If Successful the below image shows the code that should be inserted into the body.
Any help would be appreciated.