I have a NextJS app and the page structure loosely looks like this:
<Head>
<Navigation>
<Page>
<Footer>
I have a DTM script that I need to load in the <Head> ponent and then there are tags that I am firing in the <Page> ponent. But the problem is, the tags in <Page> starts firing before the DTM script get's loaded onto the page.
So, is there a way to let the DTM script in the <Head> tag load first before the <Page> ponent loads? I was looking to use "ponentwillmount" but it's being deprecated.
Can someone please advice how can I tackle this issue?
I have a NextJS app and the page structure loosely looks like this:
<Head>
<Navigation>
<Page>
<Footer>
I have a DTM script that I need to load in the <Head> ponent and then there are tags that I am firing in the <Page> ponent. But the problem is, the tags in <Page> starts firing before the DTM script get's loaded onto the page.
So, is there a way to let the DTM script in the <Head> tag load first before the <Page> ponent loads? I was looking to use "ponentwillmount" but it's being deprecated.
Can someone please advice how can I tackle this issue?
Share Improve this question edited Mar 6, 2020 at 19:27 Blueboye asked Mar 6, 2020 at 19:23 BlueboyeBlueboye 1,4944 gold badges27 silver badges54 bronze badges 5- does the external script provide a callback? – Daniel A. White Commented Mar 6, 2020 at 19:24
-
You could use
next/headto place the<script>of the DTM script in the<head>- that'll hopefully load before nextjs' code. Ideally you'd want to place it in<body>before wherever nextjs places its code. – cbr Commented Mar 6, 2020 at 19:28 - 1 I've already used react-load-script with nextjs, it has an onLoad callback you can use. Also you can use nextjs lazy load on the ponents you want to be rendered after the ponent mount. – Italo Ayres Commented Mar 6, 2020 at 19:41
- I am using next/head already in my <Head> ponent. I have added the scripts there. I am actually making a call to one my /static/js files and that js file then loads the external DTM script based on the current hostname. But, the DTM functions in <Page> ponents are firing before the script is pletely loaded and executed. – Blueboye Commented Mar 6, 2020 at 20:01
- I'm having the same issue. I put the tinyMCE script in next/head and it's about a 50% chance the script will be loaded by the time the page is mounted. And if it isn't, my editor doesn't display. – Nickprovs Commented May 29, 2020 at 4:42
3 Answers
Reset to default 6You could listen to the script load event from your <Page> ponent using vanilla javascript.
in your custom _document:
<script id="dtm" src="dtm.js" />
then in the <Page> ponent:
document.getElementById("dtm").addEventListener('load', () => {
// DTM is loaded
})
next.js offers onLoad, which triggers once the external script is loaded:
<Script src="https://example/script.js"
onLoad={() => {
console.log('script has loaded')
}
/>
You can use Head in any ponents by Nextjs.
How about you add Head in Page and put <script/> inside