@alibaba-aero/vue-webengage
v0.0.11
Published
webengage wrapper for vue as a plugin
Downloads
100
Readme
vue-webengage
Webengage wrapper for vue as a plugin
👀 EARLY RELEASE
Install
npm install vue-webengage
// or
yarn add vue-webengage
Setup
In main.js
or wherever you register the plugins:
Vue.use(VueWebengage, {
namespace: 'webengage',
key: process.env.WEBENGAGE_LICENSE,
schemas: {
hotel: {
Searched: hotelSearchedSchema,
Selected: hotelSelectedSchema,
AddedToCart: hotelAddedToCartSchema,
},
},
});
namespace
The property to access webengage in component context (set this without$
). E.gthis.$webengage
key
The key provided by webengageschemas
All of your schemas. It's not required to use schemas. Though, it's highly recommended to implement your data structure using a good library and then list them here, so you can access them later in components. 👍 Here is some:
Usage
After adding the plugin, there will be a top-level webengage
option available in SFCs.
export default {
...
data() {},
computed: {},
...,
webengage: {
...
}
}
webengage
may be an object or a function returning an object, containing webengage events:
webengage: {
'Search - Domestic Hotel': {
...
},
'Selected - Domestic Hotel': {
...
}
}
// or
webengage(schema) {
return {
'Search - Domestic Hotel': {
...
},
'Selected - Domestic Hotel': {
...
}
}
}
There are times when you need same data in different events. So, if webengage is a function, before returning the events object, defined your repetitive data, and use them multiple times in any of the events.
Also, with webengage()
being a function, the first parameter will be schema
.
webengage(schema) {
const departureDate = new Date(...);
return {
'Search - Domestic Hotel': new schema.hotel.Searched({
'Departure Date': departureDate,
...
}),
'Selected - Domestic Hotel': new schema.hotel.Selected ({
'Departure Date': departureDate,
...
})
}
}
Each event may be an object, or a function returning an object. this
will be available as the context of your component.
Later then, use this.$webengage.track(eventName)
in a proper time, to calculate event's data and trigger webengage tracker.
$webengage
These methods and properties will be available in this.$webengage
.
.track(payload)
Triggers webengage's track. The payload will be available when calculating event's data like'Search - Domestic Hotel'(payload) { ... }
.service
Original webengage object. contains all methods and properties that webengage provides. use this for tracking user and other things.
Contribute
Feel free to open pull requests or issues. make sure you implement proper test and all of them are passing with yarn test:unit