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
- Create a sample vue 2 app
- Get key for amplitude and install this plugin for Vue app
- Use this.$analytics.track('Sample track events', { hello_world: 'Hello world' })
- 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()