Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
quankhuc1 opened this issue Jan 16, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@quankhuc1
Copy link

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:
@quankhuc1 quankhuc1 added the bug Something isn't working label Jan 16, 2024
@quankhuc1
Copy link
Author

quankhuc1 commented Jan 16, 2024

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()

@quankhuc1 quankhuc1 changed the title Track() is not firing any network calls Track() is not firing any network calls when initializing with createInstance() Jan 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant