@analytics/snowplow not working

[pepew-le-boss]

I'm working on a NextJS project and after setting everything up I get this error:

../../node_modules/@analytics/snowplow/lib/analytics-plugin-snowplow.cjs.js:24:0
Module not found: Can't resolve 'snowplow-tracker'

After some research it seems that snowplow-tracker is deprecated. Also @analytics/snowplow has not been updated for 2 years now so maybe these problems are linked.

analytics.ts:

export const analytics = Analytics({
  app: "website",
  plugins: [
    googleTagManager({
      containerId: process.env.NEXT_PUBLIC_GTM_ID as string,
    }),
    snowplowPlugin({
      name: "website",
      collectorUrl: process.env.NEXT_PUBLIC_SNOWPLOW_URL as string,
      trackerSettings: {
        appId: process.env.NEXT_PUBLIC_SNOWPLOW_APP_ID as string,
        cookieDomain: "mywebsite.fr",
        cookieName: "mywebite_session",
        cookieSameSite: "Lax",
        cookieLifetime: 0,
        stateStorageStrategy: "cookie",
        resetActivityTrackingOnPageView: false,
        plugins: [
          LinkClickTrackingPlugin(),
          ClientHintsPlugin(),
          TimezonePlugin(),
          EnhancedEcommercePlugin(),
          ErrorTrackingPlugin(),
        ],
      },
    }),
  ],
})

random react component:

"use client"

import { analytics } from "@company/utils/src/lib/analytics/analytics"

export function ComponentExample() {

  useEffect(() => {
    analytics.page()
  }, [])

  return (
    <div>test</div>
  )
}

[DavidWells]

The snowplow plugin was a contribution to the project. I don't use it myself and won't have time to fix or update it.

You can see the current implementation here https://github.com/DavidWells/analytics/blob/master/packages/analytics-plugin-snowplow/src/browser.js#L201-L219

That said, it's pretty easy to create a plugin for any provider. Here are the docs https://getanalytics.io/plugins/writing-plugins/#1-provider-plugins.

It's really a matter of mapping their calls, to the analytics primitives page, track, identity etc

export default function providerPluginExample(userConfig) {
  // return object for analytics to use
  return {
    /* All plugins require a name */
    name: 'my-example-plugin',
    /* Everything else below this is optional depending on your plugin requirements */
    config: {
      whatEver: userConfig.whatEver,
      elseYouNeed: userConfig.elseYouNeed
    },
    initialize: ({ config }) => {
      // load provider script to page
    },
    page: ({ payload }) => {
      // call provider specific page tracking
    },
    track: ({ payload }) => {
      // call provider specific event tracking
    },
    identify: ({ payload }) => {
      // call provider specific user identify method
    },
    loaded: () => {
      // return boolean so analytics knows when it can send data to third party
      return !!window.myPluginLoaded
    }
  }
}