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?

score 9 · Accepted Answer · edited Nov 14 '22 at 18:34

9

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.

edited Nov 14 '22 at 18:34

Pritish Sehzpaul

58
7

answered Apr 14 '22 at 12:18

Stephen Burke

389
2
13

This helped me too – sajalsuraj Apr 25 '22 at 08:47
The example repo was moved here: https://github.com/remix-run/examples/blob/main/google-analytics – Igor Lamos Sep 27 '22 at 13:53
I am also following the same repo. It has been 48 hours but still Google Analytics says `No data received in past 48 hours`. I have obtained the tracking ID (G-XXXXXXXX) and updated my `process.env` file, rest of the code is the same as the example repo. I want to track the site running on my `localhost`, so while setting up the data stream, I simply put `www.example.com` as the URL. Is that the reason of not getting any data? I get `window.gtag is not defined. This could mean your google analytics script has not loaded on the page yet.` warning on browser (Firefox). – Nancy Dec 16 '22 at 06:34

score 8 · Answer 2 · edited Feb 18 '22 at 11:51

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

score 1 · Answer 3 · answered Jan 31 '23 at 11:43

Remix is after all a React framework you have to make use of dangerouslySetInnerHTML to add the content of your setup script to your root.txt file.

I made this short "how to ? " page that you can follow https://tipminers.com/tips/50/How-to-add-google-analytics-to-a-Remix-Run-Web-App

Running google analytics script on Remix.run

3 Answers3