Events not sent to both plugins.

[EniasCailliau]

Problem: Events are only sent to 1 of my plugins.

Long description:

• I'm using amplitude & googleAnalytics to track page loads & events
• I've noticed that the purchase event I'm sending are EITHER tracked by Amplitude OR Google, not both
• I suspect this is the case because n_purchases_logged_amplitude + n_purchase_logged_google = total_purchases_on_stripe.

Tried looking but this is not a known issue?

Here's my analytics.ts code (NextJS)

import { AccountUser } from "@/app/(website)/account/components/db";
import { ProductWithPriceAndFeatures } from "@/types/pricing";
import Analytics, { AnalyticsInstance } from "analytics";
// @ts-ignore
import amplitudePlugin from "@analytics/amplitude";
// @ts-ignore
import googleAnalytics from "@analytics/google-analytics";
declare global {
  var analytics: AnalyticsInstance | undefined;
}
const client = Analytics({
  app: "girlfriendGPT",
  plugins: [
    amplitudePlugin({
      apiKey: process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY,
      options: {
        includeUtm: true,
        includeReferrer: true,
        includeFbclid: true,
        includeGclid: true,
      },
    }),
    googleAnalytics({
      measurementIds: [process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID],
    }),
  ],
});
if (process.env.NODE_ENV !== "production") globalThis.analytics = client;

export default client;

export function productToItem(product: ProductWithPriceAndFeatures) {
  return {
    item_id: product.id,
    item_name: product.name,
    currency: product.price.currency.toUpperCase(),
    price: product.price.unitAmount,
    product_metadata: product.metadata,
    price_interval: product.price.interval,
    price_metadata: product.price.metadata,
  };
}

export function logPurchaseItem(
  product: ProductWithPriceAndFeatures,
  user: AccountUser
) {
  const item: any = productToItem(product);
  item["transaction_id"] = user.id;
  client.track("purchase", item);
}

export function logViewItem(product: ProductWithPriceAndFeatures) {
  client.track("viewItem", productToItem(product));
}

export function logSelectItem(product: ProductWithPriceAndFeatures) {
  client.track("selectItem", productToItem(product));
}

export function logViewItemList(products: ProductWithPriceAndFeatures[]) {
  client.track("viewItemList", {
    items: products.map((product) => productToItem(product)),
  });
}

I then call logPurchaseItem(product, user); from my code.

[EniasCailliau]

@DavidWells Please help :(

[DavidWells]

To debug you gotta look at the DOM to verify that GA and Amplitude are loaded.

Then, simulate the tracking call and verify the network requests are being made by looking at the networks tab.

It's possible that one of the analytics providers is rejecting the request because of how the data is formatted (products.map((product) => productToItem(product)))

You can also log tracking calls with a console plugin like so

const debuggerPlugin = {
  name: 'my-debugger',
  track: ({ payload, instance }) => {
    console.log('Track from debugger', payload)
    console.log(instance.getState().plugins)
  }
}