I have built a web app with remix run and I want to add the Google analytics. How can I add the pure JS to head and body section without making the typescript angry?
2 Answers
On any page, at anytime, you can flip between plain HTML and full client-side transitions.
If you need one tiny bit of interactivity, use a
<script
dangerouslySetInnerHTML>.
Example, taken from https://remix.run/docs/en/v1/guides/disabling-javascript
return (
<>
<select id="qty">
<option>1</option>
<option>2</option>
<option value="contact">
Contact Sales for more
</option>
</select>
<script
dangerouslySetInnerHTML={{
__html: `
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('qty').onchange = (event) => {
if (event.target.value === "contact") {
window.location.assign("/contact")
}
}
});
`
}}
/>
</>
);
This repository helped me out a lot: https://github.com/remix-run/remix/tree/main/examples/google-analytics
The one thing that tripped my up for a while was that I was developing on Brave browser which blocks analytics.
Switching to Chrome, Firefox, Safari should do the trick.
Related