diff --git a/.gitpod.yml b/.gitpod.yml
new file mode 100644
index 00000000..ef1e66e9
--- /dev/null
+++ b/.gitpod.yml
@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+ - init: npm install && npm run build
+ command: npm run watch
+
+
diff --git a/src/components/GoogleAnalytics.test.tsx b/src/components/GoogleAnalytics.test.tsx
index 187d2f75..f5043d00 100644
--- a/src/components/GoogleAnalytics.test.tsx
+++ b/src/components/GoogleAnalytics.test.tsx
@@ -122,7 +122,39 @@ describe("GoogleAnalytics", () => {
});
expect(Router.events.on).toBeCalled();
});
-
+ it('should not throw an error when no process.env exists', () => {
+ // These tests run in node however this component will also be rendered on the browser.
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ process.env = undefined
+ render(
+
+ );
+ expect(usePageViewsSpy).toBeCalledWith({
+ disabled: true,
+ gaMeasurementId: undefined,
+ ignoreHashChange: false,
+ });
+ expect(Router.events.on).not.toBeCalled();
+ })
+ it('should work with the prop when no process.env exists', () => {
+ // These tests run in node however this component will also be rendered on the browser.
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ process.env = undefined
+ render(
+
+ );
+ expect(usePageViewsSpy).toBeCalledWith({
+ disabled: false,
+ gaMeasurementId: "5678",
+ ignoreHashChange: false,
+ });
+ expect(Router.events.on).toBeCalled();
+ })
describe("debugMode", () => {
it("should not have debug_mode when the debugMode prop is not set", () => {
render();
diff --git a/src/components/GoogleAnalytics.tsx b/src/components/GoogleAnalytics.tsx
index cff18ce6..50913ceb 100644
--- a/src/components/GoogleAnalytics.tsx
+++ b/src/components/GoogleAnalytics.tsx
@@ -21,6 +21,21 @@ type WithIgnoreHashChange = GoogleAnalyticsProps & {
};
};
+const getGaMeasurementId = (gaMeasurementIdProp?: string) => {
+ let gaMeasurementId: string | undefined
+ try {
+ // process.env could be undefined if no env. file or next.config is not using env
+ gaMeasurementId = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
+ } catch (e) {
+ // nothing to do
+ }
+ // To keep feature parity, allow the env var to override the prop
+ if (!gaMeasurementId) {
+ gaMeasurementId = gaMeasurementIdProp
+ }
+ return gaMeasurementId
+}
+
export function GoogleAnalytics({
debugMode = false,
gaMeasurementId,
@@ -30,8 +45,7 @@ export function GoogleAnalytics({
trackPageViews,
nonce,
}: WithPageView | WithIgnoreHashChange): JSX.Element | null {
- const _gaMeasurementId =
- process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? gaMeasurementId;
+ const _gaMeasurementId = getGaMeasurementId(gaMeasurementId)
usePageViews({
gaMeasurementId: _gaMeasurementId,
@@ -54,13 +68,12 @@ export function GoogleAnalytics({
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
- ${
- defaultConsent === "denied" ?
- `gtag('consent', 'default', {
+ ${defaultConsent === "denied" ?
+ `gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied'
});` : ``
- }
+ }
gtag('config', '${_gaMeasurementId}', {
page_path: window.location.pathname,
${debugMode ? `debug_mode: ${debugMode},` : ""}