New Analytics Provider

[lachlan-connell-aligent]

as requested by @chanceaclark, setting up a new discussion here.

while this is a good improvement:

Ability to load in the analytics ID from the control panel instead of using an environment variable.

It doesn't appear the option to load in the analytics from an environment variable is still available?

I'm looking at core/components/analytics/provider.tsx

I think it would be good to have either option available, what do you think?

[lachlan-connell-aligent]

In my local core/components/analytics/provider.tsx, I have this code, what do you think @chanceaclark ?

'use client';

import { PropsWithChildren } from 'react';

import { FragmentOf } from '~/client/graphql';
import { Analytics } from '~/lib/analytics';
import { GoogleAnalyticsProvider } from '~/lib/analytics/providers/google-analytics';
import { AnalyticsProvider as AnalyticsProviderLib } from '~/lib/analytics/react';

import { WebAnalyticsFragment } from './fragment';

interface Props {
  channelId: number;
  settings?: FragmentOf<typeof WebAnalyticsFragment> | null;
}

const getAnalytics = (
  channelId: number,
  settings?: FragmentOf<typeof WebAnalyticsFragment> | null,
) => {
  const gaId = settings?.webAnalytics?.ga4?.tagId ?? process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID;

  if (gaId && channelId) {
    const googleAnalytics = new GoogleAnalyticsProvider({
      gaId,
      // TODO: Need to implement consent mode
      // https://github.com/bigcommerce/catalyst/issues/2066
      consentModeEnabled: false,
      developerId: 'dMjk3Nj',
    });

    return new Analytics({
      channelId,
      providers: [googleAnalytics],
    });
  }

  return null;
};

export function AnalyticsProvider({ children, settings, channelId }: PropsWithChildren<Props>) {
  const analytics = getAnalytics(channelId, settings);

  return <AnalyticsProviderLib analytics={analytics ?? null}>{children}</AnalyticsProviderLib>;
}

[chanceaclark]

I think it would be good to have either option available, what do you think?

@lachlan-connell-aligent Can you explain a bit more on the reasoning for wanting to use an environment variable here?

With the existing latest code, adding the ID in the control panel will allow GA to work not just within Catalyst but in Checkout as well. If it's only provided through the environment variable, you'll also need to add it to the CP for it to work within Checkout.

[lachlan-connell-aligent]

I just think having the option to use either an environment variable or an ID in the control panel gives people greater flexibility. I hadn't got up to the section of implementing this in the checkout yet so I didn't realise we would need it in the CP to work for checkout events yet. Is this something that could be altered for checkout events too so it could work with an environment variable there, or is there a reason it can't be from an env variable for checkout events?

[chanceaclark]

Is this something that could be altered for checkout events too so it could work with an environment variable there, or is there a reason it can't be from an env variable for checkout events?

Unfortunately, it's not and has to be added via the CP.

My take here is that even though there are valid use-cases for client-side events and we do want to keep providing these valid use-cases, we have plans to move some of these analytics calls to be server-side events through what we call Native Analytics/Data Events API. Since these server-side events hit BigCommerce's API, we'll take those events and fire them off to the analytics providers that you have configured in the CP. What this means in terms of Catalyst is that we should aim to have a consistent experience for setting up analytics provides and I think the best way there is via the CP. If we add this other way to setup client-side only analytics providers, it could lead to a disjointed experience and might cause some confusion on the multiple ways to setup your analytics providers.

As an alternative approach, even though it is a bit more custom and you'll have to manually add analytics calls, we can guide users into using the standalone @next/third-parties along with an environment variable to achieve this. Otherwise, if it fits your needs, you can always add it in your project.