Running google analytics script on Remix.run

Question

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?

Answer 1

This repository helped me out a lot: https://github.com/remix-run/examples/blob/main/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.

Answer 2

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")
              }
            }
          });
        `
      }}
    />
  </>
);