I am using Astrojs ViewTranstation. The scripts do not work and are not reloaded.

[frozen coral]

I am using Astrojs ViewTranstation. The scripts do not work and are not reloaded when the page is changed. I am having this problem with Google Tag. Does anyone have a solution?

<div id="disqus_thread" class="py-12"></div>
<script defer>
function loadDisqus() {
if (window.DISQUS) {
window.DISQUS.reset({
reload: true,
config: function () {
this.page.url = window.location.href;
this.page.identifier = window.location.pathname;
}
});
} else {
var d = document,
s = d.createElement("script");
s.src = "https://###/embed.js";
s.setAttribute("data-timestamp", +new Date());
(d.head || d.body).appendChild(s);
}
}

document.addEventListener("astro:page-load", loadDisqus);

document.addEventListener("DOMContentLoaded", loadDisqus);

</script>

<noscript>
Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
</noscript>
I tried the following for Google Tag and it still doesn't work when the page is changed.

<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

</script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
</script>
<script is:inline>
document.addEventListener(
"astro:page-load",
() => {
gtag("js", new Date());
gtag("config", "G-XXXXXXXXXX");
},
{ once: false }
);
</script>

[hazy knoll]

Hi @frozen coral, with view transitions, you have to trigger re-execution of scripts after navigation by reacting to the astro:page-load event, see https://docs.astro.build/en/guides/view-transitions/#astropage-load astro:page-load fires on the initial load and after each navigation.

[frozen coral]

It worked in the Disqus section. But the Google tag manager in the head section does not work.

[hazy knoll]

ah, sorry, i was too fast. Just saw that you already had the page-load listener.