Repository files navigation

Webengage wrapper for vue as a plugin

👀 EARLY RELEASE

CHANGELOGS

npm install vue-webengage// oryarn add vue-webengage

Inmain.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,},},});

• namespaceThe property to access webengage in component context (set this without$). E.gthis.$webengage
• keyThe key provided by webengage
• schemasAll 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:
  • superstructure
  • ObjectModel
  • yup

After adding the plugin, there will be a top-levelwebengage option available in SFCs.

exportdefault{    ...data(){},computed:{},    ...,webengage:{        ...}}

webengage may be an object or a function returning an object, containing webengage events:

webengage:{'Search - Domestic Hotel':{        ...},'Selected - Domestic Hotel':{        ...}}// orwebengage(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, withwebengage() being a function, the first parameter will beschema.

webengage(schema){constdepartureDate=newDate(...);return{'Search - Domestic Hotel':newschema.hotel.Searched({'Departure Date':departureDate,            ...}),'Selected - Domestic Hotel':newschema.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, usethis.$webengage.track(eventName) in a proper time, to calculate event's data and trigger webengage tracker.

These methods and properties will be available inthis.$webengage.

• .track(payload)Triggers webengage's track. The payload will be available when calculating event's data like'Search - Domestic Hotel'(payload) { ... }.

• serviceOriginal webengage object. contains all methods and properties that webengage provides. use this for tracking user and other things.

Feel free to open pull requests or issues. make sure you implement proper test and all of them are passing withyarn test:unit