amplitude/Amplitude-TypeScript

Track() is not firing any network calls when initializing with createInstance()

quankhuc1 opened this issue · 1 comments

Expected Behavior

In my Vue application, I installed a plugin to modify the event properties of the default [Amplitude] Page Viewed event.
Here is the code for the plugin:

export const pageViewTrackingEnrichment = () => {
  return {
    name: "page-view-tracking-enrichment",
    type: "enrichment",
    setup: async (config, amplitude) => {
      console.log("Installing page-view-tracking-enrichment");
      return;
    },
    execute: async (event) => {
      if (event.event_type !== "[Amplitude] Page Viewed") {
        return event;
      }
      event.event_properties = {
        ...event.event_properties,
		new_property: 'new_value'
      };
      return event;
    },
  };
};

This is how I installed the plugin:

const amplitudePlugin = {
  async install(Vue, store) {

    const decryptedAmplitudeKey = store.state.config.vars.decryptedAmplitudeKey;
    const instance = amplitude.createInstance();
    instance.add(pageViewTrackingEnrichment());
    instance.init(decryptedAmplitudeKey, {
      identityStorage: "localStorage",
      defaultTracking: true,
      loggerProvider: {
        enable: () => true,
        log: (message) => console.log(message),
        debug: (message) => console.debug(message),
        warn: (message) => console.warn(message),
        error: (message) => console.error(message),
        disable: () => false,
      },
    });

    Vue.prototype.$analytics = {
      track(eventInput, eventProperties, eventOptions) {
        console.log("Tracking event", eventInput, eventProperties, eventOptions);
        const trackingPromise = amplitude.track(eventInput, eventProperties, eventOptions)
        trackingPromise.promise.catch((error) => {
          console.error("Error tracking event", error);
        }).then(() => {
          console.log("Tracked event", eventInput, eventProperties, eventOptions);
        });
      }
    };
  },
};

export default amplitudePlugin;

I expected that when I used the track(), it would send an analytics event for me. I also expected the default event [Amplitude] Page Viewed would also have a new event property

Current Behavior

Right now the default event [Amplitude] Page Viewed would have the new property. This is what I expected. However, when I use the track(), it did not send any events or print out any errors. The first console.log would print out the information of the tracking event. But neither the console.error in the catch block or the console.log in the then block would print out any information of the tracking event. It also does not give me any network calls in my Network tab of my Chrome browser dev tool

Possible Solution

Steps to Reproduce

  1. Create a sample vue 2 app
  2. Get key for amplitude and install this plugin for Vue app
  3. Use this.$analytics.track('Sample track events', { hello_world: 'Hello world' })
  4. See if events are being sent in the Chrome network tab

Environment

  • JS SDK Version:
  • Installation Method:
  • Browser and Version:

This code works for me if I changed the initialization of the library from

const instance = amplitude.createInstance();
instance.add(pageViewTrackingEnrichment());
instance.init(decryptedAmplitudeKey, {
  identityStorage: "localStorage",
  defaultTracking: true,
  loggerProvider: {
    enable: () => true,
    log: (message) => console.log(message),
    debug: (message) => console.debug(message),
    warn: (message) => console.warn(message),
    error: (message) => console.error(message),
    disable: () => false,
  },
});

to

amplitude.add(pageViewTrackingEnrichment());

amplitude.init(decryptedAmplitudeKey, {
  identityStorage: "localStorage",
  defaultTracking: true,
  loggerProvider: {
    enable: () => true,
    log: (message) => console.log(message),
    debug: (message) => console.debug(message),
    warn: (message) => console.warn(message),
    error: (message) => console.error(message),
    disable: () => false,
  },
});

The track() would work normally. I think there can be a potential bug in the createInstace() where it does not provide context of current amplitude instance to track(). This particularly results that the instance created by createInstance() would not be accessible to amplitude.track(). Maybe in the docs, there should be somewhere saying that if we use createInstance() to create an instance, we need to use that instance throughout the code, such as instance.track() instead of amplitude.track()