davidwells / analytics Goto Github PK

Let's say I want to track a certain view from being rendered:

export default function MyView(props) {
  useEffect(() => {
    analytics.page({ title: 'My View' })
  }, [])

  return (
    <div>
      <p>
        Yeehaw!
      </p>
    </div>
  )
}

Would the above be correct or would you always have to first wait for the analytics library to load? Or is this done internally anyway? E.g.:

  useEffect(() => {
    analytics.ready(() => {
      analytics.page({ title: 'My View' })
    })
  }, [])

The current implementation allows for the PageData attributes to be overridden when calling analytics.page({...}).

It would be beneficial if additional properties could be specified in PageData beyond the standard.

And example of this, is adding additional Context to a Page View event with Snowplow.

For Snowplow, a common use case would be to inject the array of context data. This would look something like:

analytics.page({
  context: [{
    schema: 'iglu:com.acme/blog_post/jsonschema/1-0-0',
    data: {
      title: 'Re-thinking the structure of event data',
      category: 'Data Insights',
      datePublished: '2020-01-24'
    }
  }]
});

Hello guys! I am trying to use this analytics script in an existing typescript environment. I tested the vanilla js and it worked pretty well, now I'd like to integrate the tool in my existing typescript application.
My question is: are there any types available or is there documentation available for using this with TypeScript?
PS: I tried searching in the available documentation in github as well for existing types in npm / TypeSearch, nothing there.

These links seem dead (come from sidebar):

• https://getanalytics.io/plugins/google-analytics/
• https://getanalytics.io/plugins/google-tag-manager/

According to https://github.com/DavidWells/analytics/blob/master/CONTRIBUTING.md#start there should be a npm start script, which is apparently missing:

$ npm start 
npm ERR! missing script: start

I'm currently tracking events and have the GA plugin added, but I'm having trouble finding the payload values when browsing events within my GA dashboard. Looking at the GA plugin I'm seeing that it expects label, value, category in the payload (not any key:values we want). Is that correct? I'm somewhat new to the GA interface so I apologize in advance if the data is there and I'm just not finding it. My code looks like this:

analytics.track('chooseStackOption', {
  type: 'framework',
  option: 'next.js'
});

Hi there

I am trying to initialise analytics using the segment plugin, but I am struggling to grab a reference to the created analytics and use it to call page, track and identify calls.

Here is how I got it to work for me so far:

 public page(config: AnalyticsConfig, pageData: PageData) {

    analytics = Analytics({
      app: 'recruiting',
      plugins: [
        segmentPlugin({
          writeKey: config.writeKey
        })
      ]
    });

    analytics.page(pageData);
  }

  public identify(config: AnalyticsConfig, id: string, traits: any) {

    analytics = Analytics({
      app: 'recruiting',
      plugins: [
        segmentPlugin({
          writeKey: config.writeKey
        })
      ]
    });
    analytics.identify(id, traits);
  }

  public track(config: AnalyticsConfig, eventName: string, payload?: any) {


    analytics = Analytics({
      app: 'recruiting',
      plugins: [
        segmentPlugin({
          writeKey: config.writeKey
        })
      ]
    });
    analytics.track(eventName, payload);
  }

I feel that this isn't the best way of doing it as I have to pass through my write key and initialise Analytics every time I make a page, track or identify call.

I am working in Angular 9 + typescript and not sure how to initialise Analytics once and then fetch a reference to the already created Analytics and use it.

It looks like the value of label is stored in payload.properties.label, but the ga plugin tries to get it from payload.label.

https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-ga/src/browser.js#L71

Payload object:

Hi there

I was using angulartics2 as an analytics library before switching to analytics. We are sending our analytics to segement.
I hoping to ask if there is a way to send through page data in a better format similarly to how it was when using angulartics2?

Here is what I mean:
Angulartics2

analytics

I like the fact that analytics sends the height and width as well. I have added the name field to the page track call myself which is working fine but when viewing it in the segment debugger it shows as /recruiting/ instead of Job Postings

Thanks for the hard work :)

Hello,

I'm trying to use custom dimensions variables with @analytics/google-tag-manager plugin.
And this is what I did:

const analytics = Analytics({
  app: 'App-Client',
  plugins: [
    googleTagManager({
      containerId: envHandler.GTM_ACCOUNT_ID
    })
  ]
})

analytics.page({
  'pageTitleCustomDimension': 'Homepage'
})

I did the settings in Google Analytics (I created the custom dimension) and also in Google Tag Manager (I created the dataLayer Variable and linked to the GA custom dimension).

But in GA, the result that I got is the default value of the dataLayer Variable from GTM.

The preview of GTM:

Every time, I use the page method, it send a Message event with the pushed data layer. It does not fire my Page View Tag.

Is there a documentation on how to use custom dimensions with @analytics/google-tag-manager ?

Thank you.

This could be solved by adding support for either multiple instances of the analytics object or adding support for duplicate google analytics plugins that each have a different tracking code.

First of all: nice work!

How can I migrate my Google Analytics event tracking with a category, action and label to analytics? The event tracking implementation from Google:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

It would be great if use-analytics npm package can bundle type definitions. It would help me get rid of this from my code:

https://gitlab.com/trao/trao.dev/-/blob/master/global.d.ts#L11

I would be happy to file a PR to fix this.

https://getanalytics.io/resources/faq/#how-much-bundle-size-will-this-add

This page should probably mention:

• If the package is tree-shakeable (looks like it is).
• I could not find redux as a peer dependency in the source code. Unsure how adding redux will save ~2.6kb)
• Does the final bundle size of ~11.2kb includes just ESM or both ESM and CJS?

For data analysis reasons it is important for the anonymousId to be the same across integrations. We're having difficulties analysing our tracking data because we expected the following two IDs to be the same:

Do you agree that each integration should retrieve the analytics.js anonymousId if already known when loading? For now we're going to work around this by either by telling segment what analytics.js' anonymousId is or by telling analytics.js what Segment's anonymous ID is, tbd.

And if so, would the same be necessary for the userId?

Hello everyone 👋

Is there any way to create a Custom dimension with @analytics/google-analytics plugin? I didn't find any information about that in the documentation.

Thank you

Hey there, love this lib. Spent a whole bunch of time configuring Google Analytics events and it went swimmingly in development. Then I built the application as an Angular/Electron .dmg file and installed... and none of my analytics are showing up at all. No events, pageviews, nothing. Any idea what could cause this issue of not working in prod? Worked beautifully when testing in dev

Hi 👋,

First, I hope everything is ok for you by the current times.

I would love to use your library but, I do have a problem when invoking page() with react-router-dom.

I made a codesandbox to illustrate my problem.

When I navigate between page A, B, C. React-router change the page URI correctly but internal state of analytics seems to be unchanged.

I tried first with history with the listen function then with a useEffect() inside my page components.

The page event is correctly dispatched but the reducer didn't update the URL and stuff because it assumes dispatched data is under action.data.

export default function page(state = initialState, action) {
  switch (action.type) {
    case EVENTS.page:
      return Object.assign({}, state, action.data)
    default:
      return state
  }
}

But dispatch look like that :

store.dispatch({
  type: EVENTS.pageStart,
  properties: getPageData(d),
  options: opts,
  userId: getUserProp(ID, instance, d),
  anonymousId: getUserProp(ANONID, instance, d),
  meta: {
    timestamp: timestamp(),
    callback: resolvePromise(resolve, getCallback(data, options, callback))
  },
})

I think I'm missing something about the current behavior and I would love a bit of help to figure out 😊

Hey there,

It seems like gatsby-plugin-analytics hasn't received much attention in a while. I'd love it if we can make use of new features from both Gatsby and Analytics since the last time it was built.

I think gatsby-plugin-analytics should help users initialize the Analytics component as well as window.Anlytics = Analytics and setting up AnalyticsProvider so users can use hook right away.

The way we can go about it is using Gatsby component shadowing feature. Suggested end user experience:

• yarn add gatsby-plugin-analytics analytics use-analytics @analytics/whatever-plugin
• in gatsby-config.js:

module.exports = {
  plugins: ["gatsby-plugin-analytics"]
}

• configure plugins in src/gatsby-plugin-analytics/analytics.js

import Analytics from 'analytics'
import googleAnalytics from '@analytics/google-analytics'

const analytics = Analytics({
  app: 'awesome-app',
  plugins: [
    googleAnalytics({
      trackingId: 'UA-1234567',
    })
  ]
})

export default analytics

• in component:

import { useAnalytics } from 'use-analytics'

...

const { track } = useAnalytics()
track()

These are just some initial thoughts on what the future Gatsby plugin can do. Would love your ideas and feedback! I'd be happy to help out with this as well! Thanks for building a great suite of analytic-related libraries so far!

Why is this calling doubleclick.net? I am only using the googleAnalyticsPlugin and the example plugin but I get pings to https://stats.g.doubleclick.net and they seem to be coming from the library.

I'd like to self-host a copy of analytics.js and serve it from my hostname. Would you accept a pull request, if I make it configurable?

The default behavior would remain unchanged and I would like to add an optional configuration to be able to change the URL of analytics.js

PS: Thank you for creating this amazing project.

It's a great new open source product analytics tool similar to Mixpanel, Amplitude or Heap. http://posthog.com/

Sample page obj from Segment looks like this..

{
  "messageId": "test-message-ba192f",
  "timestamp": "2020-05-26T22:47:19.726Z",
  "type": "page",
  "email": "[email protected]",
  "projectId": "HUYWRgukrrNoMy2xznmfp",
  "properties": {
    "property1": 1,
    "property2": "test",
    "property3": true
  },
  "userId": "test-user-t1uhd",
  "name": "Home Page"
}

A page obj from this plugin looks roughly like this..

{
    ...,
    "page": {
      ...,
      "path": "path",
      "search": "",
      "title": "title",
      "url": "url"
    },
  "properties": {
    ...,
    "path": "path",
  },
  "type": "page",
  "userId": "userId"
}

As you can see there is no obvious support for 'name' or 'category' values.

Hello,

Would it be possible to add AppInsights to the list of supported integrations? I think it'd be a "provider plugin"? The JS SDK is on github: https://github.com/Microsoft/ApplicationInsights-JS

The list of tracking methods (e.g. trackEvent, trackPageView, etc):
https://github.com/Microsoft/ApplicationInsights-JS#sending-telemetry-to-the-azure-portal

API reference: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md

If I try to give you a headstart, assuming I understood your interface, some pseudo-code would be:

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

export default function applicationInsightsPlugin(userConfig) {
    let appInsights;
    return {
        name: 'application-insights-plugin',
        config: {
            /* See https://github.com/Microsoft/ApplicationInsights-JS#configuration */
        },
        initialize: ({ config }) => {
            const appInsights = new ApplicationInsights({
                config: {
                    instrumentationKey: 'INSTRUMENTATION_KEY_GOES_HERE'
                    /* ...Other Configuration Options... */
                }
            });
            appInsights.loadAppInsights();
        },
        page: ({ payload }) => {
            appInsights.trackPageView();
        },
        track: ({ payload }) => {
            appInsights.trackEvent({ name: 'some event' }, data);
        },
        identify: ({ payload }) => {
            appInsights.setAuthenticatedUserContext(authenticatedUserId, accountId, storeInCookie)
        },
        loaded: () => {
            // return boolean so analytics knows when it can send data to third party
            return !!appInsights
        }
    }
}

It is possible to load AppInsights as a script on the page like most trackers, but that's not how we've used it. Hence my pseudo-code uses the npm module.

Currently in the process of integrating analytics, I really like the concept and the library!

Am probably going to end up writing a barebones Facebook Pixel plugin, just thought I would make a ticket to see it. It has a pretty simple API that I think will map well.

Some issues I've encountered:

• Facebook PageView event doesn't let you tell it what page you're viewing, it takes it straight from the URL. It also does this automatically (even in SPAs) unless you configure disablePushStateTracking
• It doesn't look like analytics standardises what you pass to identify which makes it hard to make a single identify call if you are for instance using segment and facebook which have different field names.

As described at Segment's documentation, sometimes you don't know a user's ID, but still want to tie their session to traits. In this case you use anonymousId instead of the userId for the identify call.

Using analytics.js this should be as simple as calling analytics.identify(traits) instead of analytics.identify(userId, traits).

However, I'm not seeing any outgoing http requests (using the segment provider) when I do this. When I call analytics.track, I do see an outgoing request.

When I log the first argument of the identify callback it does seem to do what it needs to:

However, there's no outgoing http request, and segment also doesn't capture the identify call.

Hello,

Are there any plans to remove redux from the core package? It increases the final bundle size, but it is needed only for development mode. Pehaps you can extract it into a separate package?

I'm using the Segment plugin

import Analytics from 'analytics';
import segmentPlugin from '@analytics/segment';`

The page and track events are successfully appearing in my Segment console, but it seems analytics.reset() doesn't clear the Segment cookies.
The logout code includes this:

    analytics.track('logout');
    analytics.reset();

When the user logs out, I see the logout event in the Segment dashboard, but all subsequent events keep having the sam userId they had before the reset() call.

I found that by calling .identify(userId) on IE 11 will cause this issue

Object.keys: argument is not an Object

Steps to reproduce

• Open IE 11 on BrowserStack or a Windows machine
• Call .identify and provide a string as argument

How to correctly add multiple instances of the same plugin?
I need two instances of the analytics-plugin-google-tag-manager on a page.
As far as I know GTM doesn't forbid it and even has an example https://developers.google.com/tag-manager/devguide#multiple-containers.

This code won't work (error related to namespaces).

  plugins: [
    googleTagManager({containerId: 'GTM-123xxx'}),
    googleTagManager({containerId: 'GTM-123yyy'}),
  ]

I guess I could overcome it with little overriding like this

  plugins: [
    {...googleTagManager({containerId: 'GTM-123xxx'}), NAMESPACE: 'google-tag-manager-1'},
    {...googleTagManager({containerId: 'GTM-123yyy'}), NAMESPACE: 'google-tag-manager-2'},
  ]

But it won't work either - in plugin's initialize method script is being injected only when there is no .../gtm.js script on a page (regardless of it's containerId param).

Maybe scriptLoaded function should be rewritten with containerId parameter?

David, what your suggestions could be on this matter?

Hi, is it possible to chain multiple plugins to modify the payload so that changes from one plugin are passed to another?

Example:
The setup is like this:

Analytics({
    ...
    plugins: [
        // Plugins that disable tracking on certain conditions
        doNotTrackPlugin(),
        ...
        // plugins that modify the payload
        enrichAnalyticsPlugin(),
        dropNoValuePropertiesPlugin(),
        snakecasePropertiesPlugin(),
        // 3rd party analytics
        googleAnalyticsPlugin({ ... })
    ],
    ...
}

where each of the plugins that modifies the payload changes only a single specific part of it. E.g. this is a plugin which converts the property keys in payload.properties from camelCase to snake_case:

export function snakecasePropertiesPlugin() {
  return {
    name: "snakecase-properties",
    track: ({ payload }) => {
      return {
        ...payload,
        properties: snakeCaseProperties(payload.properties)
      };
    },
    identify: ({ payload }) => {
      return {
        ...payload,
        traits: snakeCaseProperties(payload.traits)
      };
    },
    page: ({ payload }) => {
      return {
        ...payload,
        properties: snakeCaseProperties(payload.properties)
      };
    }
  };

  function snakeCaseProperties(obj) {
    return Object.keys(obj).reduce((agg, key) => {
      agg[_.snakeCase(key)] = obj[key];
      return agg;
    }, {});
  }
}

The assumption is that the plugins that modify the payload should be run for all data that is passed to the Analytics instance, hence I did not want to use the namespacing as described in the docs.

But what this leads to is that instead of the data being passed from plugin to plugin sequentially, they are all fed with the initial data. So when there are multiple plugins modifying the payload before it is sent to the 3rd party analytics, those changes are just overwriting one another when the new returned value is merged with result from previous plugin, instead of those changes compounding.

Is this use case supported?

I assume (haven't tested yet) that in this scenario, it could be solved by namespacing all the modifying plugins? (e.g. so that all their functions are namespaced, e.g. 'track:google-analytics'). But if all these changes should be applied to multiple 3rd party analytics, it would quickly get inconvenient as the same functions would have to be namespaced for all of them? (So each plugin would have to have not only 'track:google-analytics', but also 'track:hubspot', for example).

Additional issue is that with my approach, the order is important (e.g. payload should be first enriched, and only then the value-less properties should be dropped). Could that be achieved with this approach? Or would I have to specify for each plugin the namespace of the plugin that should go after it? (So that in the example above, enrichAnalyticsPlugin needs to be namespaced to dropNoValuePropertiesPlugin, that in turn namespaced to snakecasePropertiesPlugin, and so on, so they are all sequentially run?). The downside of that approach is that I cannot just reorder the plugins easily, but I would have to rename the namespaces for all affected plugins.

Or is there maybe a plugin that could be given a list of other plugins, and subplugins would modify the payload sequentially? Or will I have to squash the plugins into a big one and namespace it to the desired 3rd party analytics plugin?

What's the best course of action here? Thanks.

Upon reading the API it's not clear how to remove injected scripts from the DOM. How does one accomplish this?

When trying to use analytics in a WebExtension there is a strict mode error when bundling.

In the chrome extensions documentation there is a guide to integrate analytics into the extension, they mention that given the tight Content Security Policies, loading the analytics from google requires to explicitly allow it in the manifest by setting:

{
  ...,
  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
  ...
}

Parenthesis: Digging into the code of google analytics plugin I figured out the script is loaded from a different url (https://www.google-analytics.com/analytics.js). My suggestion is to explicitly mention this in the docs.

But just by importing analytics into my main file I get this error:

I thought it was the url but if looked it up I got this:

So trying to solve it without having to allow 'unsafe-eval' in the CSP I found this similar issue in other repo: indico/react-overridable#2

What they did to solve it is to disable strict in their rollup config.

I have my extension code pushed in a branch if you want to test this.
Thank you!

(ps: for now I'm going to add unsafe eval 😅)

Hello,

Will it possible to have a Datadog(https://www.datadoghq.com/) integration?

Regards

Hi, I'm experimenting building out a basic custom plugin which I am looking to add to the vue example. When I add even the most basic custom plugin (like the one in the docs that does nothing) I am getting the following error:

applyMiddleware.js?05f2:39 Uncaught TypeError: middleware is not a function at eval (applyMiddleware.js?05f2:39) at Array.map (<anonymous>) at eval (applyMiddleware.js?05f2:38) at <anonymous>:1:28399 at createStore (createStore.js?61ed:51) at analytics (analytics.browser.es.js?4747:3847) at eval (analytics.js?da7c:4) at Module../src/analytics.js (app.js:2662) at __webpack_require__ (app.js:726) at fn (app.js:101)

I'm guessing its some sort of dependency version problem(?) but would really appreciate any insight.

Add debug package for development mode

var debug = function() {};
if (process.env.NODE_ENV !== 'production') {
  debug = require('debug')('sockjs-client:receiver:htmlfile');
}

// usage
debug('my message');

Seen https://github.com/sockjs/sockjs-client/blob/0ab53b8bf24ead0df4bed488333ceb9e81b8c1b7/lib/transport/receiver/htmlfile.js#L10-L13

I have a requirement for implementing google analytics for my Angular 8 project in client side. As per your document i tried installing analytics using npm and on importing the analytics library, i am getting an error like below .

Why i am not able to import it ?
@DavidWells

I am using node v12.13.1.

Can anyone please help ?

I'm using the Segment plugin, where my Segment account is configured to forward events to Mixpanel. Mixpanel defines its own unique distinct ID for each user and it is necessary for me to call Segment's alias method to then link my user's anonymous ID with Mixpanel's distinct ID. See also 1 and 2 (note that I am not using user IDs as my app does not require registration; instead I use anonymous IDs).

However the analytics API seems to lack the alias function. How would I then call Segment's alias method?

Current behavior:
If I have 2 plugins with e.g. a track hook, and one plugin defines a namespaced hook to run before the other plugin (track:pluginB in the example below), then when I try to remove a property from payload.property object in the upstream plugin, this change is not propagated to the downstream plugin (see example below).

This is unexpected behavior, as other changes seem to be propagated correctly.

Desired behavior:
If I remove properties in the upstream plugin, the change should be propagated to the downstream plugin and the property should not be defined on the object there.

import { omitBy, isNil } from "lodash";

// plugin A
{
  name: "pluginA",
  "track:pluginB": ({ payload }) {
    // Returns payload with null or undefined values removed from
    // payload.properties
    return {
      ...payload,
      properties: {
        ...omitBy(payload.properties, isNil)
        test: true
    };
  }
  ...
};

// plugin B
{
  name: "pluginB",
  config: { payload },
  track:
    // The printed properties object includes `test: true`, so the payload
    // was clearly passed through pluginA["track:pluginB"], but the object
    // also still includes null and undefined values, although the `omitBy`
    // function removed them.
    console.log(payload.properties);
    return payload;
  ...,
};

Snowplow JavaScript Tracker 2.15.0 introduces a number of new features, including:

Anonymous Tracking Configuration
Connection Timeout Configuration
Skip Browser Feature Capture
Client Hints Auto Capture

Currently if you run this in a react native project you get the following error:

TypeError: undefined is not an object (evaluating 'os.indexOf')

I'm guessing that the check to see if this is running in a browser is passing even though react native should probably be treated like a "server" like environment.

I have no idea why do I continue to get errors 'TypeError: undefined is not an object (evaluating 'n[t].src.match')'.
Example of report in bugsnag:
https://i.imgur.com/cLfm60Y.png
https://i.imgur.com/H2pgIDn.png
It refers to this lines in source code:

  const scripts = document.querySelectorAll('script[src]')
  return !!Object.keys(scripts).filter(key => scripts[key].src.match(regex)).length

I can't even imagine when scripts[key].src in these lines could be undefined.
Anyway, we can replace scripts[key].src.match with (scripts[key].src || '').match.

Current behavior:
If I have 2 plugins, and one plugin defines a namespaced hook to run before the other plugin (track:pluginB in the example below), the config in the namespaced hook refers to the target plugin's config, instead of the config where the function was defined (see example below).

This is unexpected behavior, as one would expect that all hooks defined in single plugin would have access to their plugin's config object.

Desired behavior:
All hooks defined within one plugin should have access to their plugin's config object, regardless of whether they are namespaced or not.

// plugin A
{
    name: "pluginA",
    config: {test: "A"},
    "track:pluginB": ({ config }) {
        // config refers to pluginB's config!
        console.log(config.test) // prints B
    }
    ...
  };

// plugin B
{
    name: "pluginB",
    config: {test: "B"},
    track:
        // config refers to pluginB's config!
        console.log(config.test) // prints B
    ...,
  };

Thanks for this amazing package and your hard work!

I'd send a PR, but I'm out of town.

FullStory changed their JS package src to: edge.fullstory.com/s/fs.js

See
https://help.fullstory.com/hc/en-us/articles/360041242094-FullStory-on-a-CDN

I'm getting a lot of "Full Story failed to load" errors with the current src.

If L40 reference below can be changed to edge.fullstory.com/s/fs.js for the next release, that'd be awesome! Thanks again.

According to the docs it looks like it is possible to run Google Analytics inside of an express server? I was trying to do that with the following code:

import Analytics from 'analytics';
import googleAnalytics from '@analytics/google-analytics';
import { trackingID } from '../../config/google-analytics';

console.log(trackingID); // verified to be set

export const analytics = Analytics({
  app: 'api',
  plugins: [
    googleAnalytics({
      trackingId: trackingID,
    }),
  ],
});

and then call it in a route with

analytics.track('play', {
    category: 'Videos',
    label: 'Fall Campaign',
    value: 42,
  });

But looking in the realtime google analytics tab I don't see any events. Any idea on what might be wrong?

The CONTRIBUTING.md file suggests this project is licensed under MIT, but references a LICENSE file that doesn't exist. package.json also doesn't specify the license, nor could I find an explicit license anywhere in the docs.

Am I missing it somewhere, was it just missed, or is the lack of explicit license intentional? Project looks great!

I'm working to resolve a current issue where the ga default cookie is not sent with the correct SameSite and Secure flags. In a normal setup you would do something like

ga('create', 'UA-XXXXX-Y', {
  'cookieName': 'gaCookie',
  'cookieDomain': 'blog.example.co.uk',
  'cookieExpires': 60 * 60 * 24 * 28  // Time in seconds.
  'cookieUpdate': 'false',
  'cookieFlags': 'SameSite=None; Secure',
});

With Chrome 84, cookies will now be flagged with an issue in the console if they are not correctly set with the proper attributes. In a future version these cookies will be discarded.

For the short term could we add a extra config object to the plugin method
Something like,

googleAnalytics({trackingId: 'UA-12345678-1'}, {cookieFlags: 'SameSite=None; Secure'})

Then it would be easy to assign that to the gaConfig on line 86.

I'm happy to help where I can.

I am not sure what might be wrong. It works in development, but in production running window.Analytics.getState() I see this. All tracking requests are in the queue and never transmitted over to GA.

You can see the site live at https://lovemyvoice.app/. It's not localized to English yet, but that shouldn't matter. You can see analytics.ts file in devtools (source maps are included).

[email protected]
[email protected]
@analytics/[email protected]
[email protected]