I want to load some script files in Helmet tag using Gatsby.js , the script files are something like this:
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
wait_for_update: 1500,
});
gtag('set', 'ads_data_redaction', true);
</script>
This is my SEO component :
<Helmet>
<title>{metaTitle}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script id="CookieConsent" src="https://policy.app.cookieinformation.com/uc.js" data-culture="EN" type="text/javascript"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=321012880"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
wait_for_update: 1500,
});
gtag('set', 'ads_data_redaction', true);
</script>
</Helmet>
when I use this directly inside the Helmet tag , this will cause an error , better said , the script code will not be read
any idea how to solve this ? or is there any alternative to load script files in Gatsby ?
Thanks
In Helmet 3.0.0 you can use innerHTML:
<Helmet
script={[{
type: 'text/javascript',
innerHTML: `
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('consent', 'default', {
ad_storage: 'denied',
analytics_storage: 'denied',
wait_for_update: 1500,
});
gtag('set', 'ads_data_redaction', true);
`
}]}
/>