From 6b17abc6fb585805e79f2dc7582b8097c44a3557 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Wed, 9 Mar 2022 16:21:59 +0200 Subject: [PATCH 01/67] docs: refine README for create-remix/express --- packages/create-remix/templates/express/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/create-remix/templates/express/README.md b/packages/create-remix/templates/express/README.md index 4b7950d7666..78eb6f71a0c 100644 --- a/packages/create-remix/templates/express/README.md +++ b/packages/create-remix/templates/express/README.md @@ -4,9 +4,7 @@ ## Development -You'll need to run two terminals (or bring in a process manager like concurrently/pm2-dev if you like): - -Start the Remix development asset server +Start the Remix development asset server and the Express server by running: ```sh npm run dev From ba7f6d5f52413b215062f8c1785bddc9e4885d26 Mon Sep 17 00:00:00 2001 From: Kostas Bariotis Date: Thu, 10 Mar 2022 17:51:28 +0200 Subject: [PATCH 02/67] sign CLA --- contributors.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/contributors.yml b/contributors.yml index 483dd432681..98219207536 100644 --- a/contributors.yml +++ b/contributors.yml @@ -136,6 +136,7 @@ - kalch - kanermichael - karimsan +- kbariotis - KenanYusuf - kentcdodds - kevinrambaud From 777d70c3f251ffd7f873d867f4801e374c2d375d Mon Sep 17 00:00:00 2001 From: "Stephen E. Chiang" Date: Fri, 29 Apr 2022 16:16:14 +0200 Subject: [PATCH 03/67] docs(examples/google-analytics): Change to getting GA_TRACKING_ID via .env and update README (#2960) Co-authored-by: Stephen Chiang --- contributors.yml | 1 + examples/google-analytics/.env.example | 1 + examples/google-analytics/README.md | 2 +- examples/google-analytics/app/root.tsx | 25 ++++++++++++++----- .../app/utils/gtags.client.ts | 6 ++--- 5 files changed, 24 insertions(+), 11 deletions(-) create mode 100644 examples/google-analytics/.env.example diff --git a/contributors.yml b/contributors.yml index 9def8bbc60b..a51c1558464 100644 --- a/contributors.yml +++ b/contributors.yml @@ -336,3 +336,4 @@ - zachdtaylor - zainfathoni - zhe +- chiangs diff --git a/examples/google-analytics/.env.example b/examples/google-analytics/.env.example new file mode 100644 index 00000000000..c830d56722b --- /dev/null +++ b/examples/google-analytics/.env.example @@ -0,0 +1 @@ +GA_TRACKING_ID=Your google analytics id goes here. \ No newline at end of file diff --git a/examples/google-analytics/README.md b/examples/google-analytics/README.md index 0168107b493..bcf82b51bd5 100644 --- a/examples/google-analytics/README.md +++ b/examples/google-analytics/README.md @@ -12,7 +12,7 @@ Open this example on [CodeSandbox](https://codesandbox.com): This example shows how to use Google analytics with Remix. -First you have to get the Google analytics ID and add that key in the [app/utils/gtags.client.ts](./app/utils/gtags.client.ts) file. +First you have to get the Google analytics ID and add that key in the [.env.example](./.env.example) file. Check [app/root.tsx](./app/root.tsx) where page tracking code is added. For tracking events check [app/routes/contact.tsx](./app/routes/contact.tsx) file. diff --git a/examples/google-analytics/app/root.tsx b/examples/google-analytics/app/root.tsx index e99cde7a868..f49c764e04f 100644 --- a/examples/google-analytics/app/root.tsx +++ b/examples/google-analytics/app/root.tsx @@ -1,4 +1,4 @@ -import type { MetaFunction } from "@remix-run/node"; +import { json, LoaderFunction, MetaFunction } from "@remix-run/node"; // import { json } from "@remix-run/node"; import { Link, @@ -8,6 +8,7 @@ import { Outlet, Scripts, ScrollRestoration, + useLoaderData, useLocation, } from "@remix-run/react"; import { useEffect } from "react"; @@ -28,6 +29,15 @@ import * as gtag from "~/utils/gtags.client"; // }); // } +type LoaderData = { + gaTrackingId: string | undefined; +}; + +// Load the GA tracking id from the .env +export const loader: LoaderFunction = async () => { + return json({ gaTrackingId: process.env.GA_TRACKING_ID }); +}; + export const meta: MetaFunction = () => ({ charset: "utf-8", title: "New Remix App", @@ -36,10 +46,13 @@ export const meta: MetaFunction = () => ({ export default function App() { const location = useLocation(); + const { gaTrackingId } = useLoaderData(); useEffect(() => { - gtag.pageview(location.pathname); - }, [location]); + if (gaTrackingId?.length) { + gtag.pageview(location.pathname, gaTrackingId); + } + }, [location, gaTrackingId]); return ( @@ -48,11 +61,11 @@ export default function App() { - {process.env.NODE_ENV === "development" ? null : ( + {process.env.NODE_ENV === "development" || !gaTrackingId ? null : ( <>