We're utilizing a chat plugin with GTM in our Next.js application.
Our goal is to have GTM handle everything, without any code on the front end. GTM injects the main script and also handles injecting the init script.
We only want the chat to be visible on specific pages, not all of them.
The issue is that once the script is loaded, it remains loaded.
Currently, it was statically implemented which is why it isn't functioning as expected:
<script>
window.addEventListener("foo", () => {
// DO SOMETHING
});
</script>
Thus, the callback will fire on every page once loaded.
To address this dynamically, I am considering using dynamic variables like so:
<script>
const enableFoo = {{customGTMVariable}};
</script>
<script>
enableFoo && window.addEventListener("foo", () => {
// DO SOMETHING
});
</script>
Will this method work or should I explore options involving the DataLayer?
While I am not an expert in GTM, our consultants are supposed to be. I want to be well-prepared when discussing this with them to resolve the issue.
Possibly updating a cookie with each page change could help?
The key is to avoid modifying the front-end code. Anything achievable with GTM should suffice.