SDK Methods - GA Events

The following GA Events methods are available to plugin developers when importing @deliveryhero/vendor-portal-sdk.

pushGA4Event

[RECOMMENDED to use for pushing GA4 events]

• Sends GA4 event with the new attributes.

Method Signature:

  pushGA4Event('test-event-name', {
    section: 'test-section',
    subsection: 'click',
  });

The above event payload will be translated finally as below:

  {
    section: 'test-section',
    action: 'click',
    userId: 'some-user-id',
    selected_vendor_id:    'FP_SG;wxyz',
    selected_vendor_count:    'FP_SG;2',
    global_vendor_count: 'FP_SG;2',
    locale:    'da',
    user_country:    'SG',
    plugin_code:    'PLUGIN_CODE',
  }

Definition -

• Core Attributes sent by Webapp SDK.

  • userId - id of the user signed into Vendor Portal (portal)
  • selected_vendor_id - selected vendor from single vendor selector on portal, format - ENTITY_ID;VENDOR_ID. eg- FP_SG;abcd
  • selected_vendor_count - count of the selected vendors per entity from multi-vendor selector on portal. format - ENTITY_ID_1;COUNT_1,ENTITY_ID;COUNT_2 eg - In case a user has vendors from multiple entities like FP_SG and FP_BD (which is not supported and not recommended by portal)

      `FP_SG;1,FP_BD;2`
    

  • global_vendor_count - count of all the vendors per entity. format - ENTITY_ID_1;COUNT_1,ENTITY_ID;COUNT_2 eg - In case a user has vendors from multiple entities like FP_SG and FP_BD (which is not supported and not recommended by portal)

      `FP_SG;2,FP_BD;2`
    

  • locale - locale of the user signed in to the portal.
  • user_country - country of the user signed in to the portal.

• Different kinds of attributes which are to be sent by the plugin.

  • section
  • subsection
  • group
  • label
  • referred_section

pushPluginLoadStartedEvent(options?)

DEPRECATED: Soon to be removed as the responsibility of firing the plugin load start event has been moved to Webapp shell.

Previously, the start time along with plugin info was being sent as GA evetn payload to track plugin performance metric. Now it has been realised that the plugin loading starts much earlier than mounting of application on a plugin container. So it would make sense that webapp shell fires this event instead when the plugin bundle is loaded.

pushPluginLoadCompletedEvent(options?)

• Call this method when your plugin is ready - the route’s main content is ready to accept interactivity from the user, i.e. main business data is loaded over API and visible to the user
• Push event to google analytic with Epoch timestamp
• Use this with pushPluginLoadStartedEvent

Parameters

options(optional)
An object that contains configuration for the pushPluginLoadStartedEvent. Here is the available keys:

• timestamp: number

No parameters

When no parameters are provided, the method will push event with generated Epoch timestamp represent the current date and time as of the time of instantiation.

Usage -

// After plugin has loaded
pushPluginLoadCompletedEvent();

// Push completed event with timestamp
const timestamp = Date.now();
pushPluginLoadCompletedEvent({ timestamp });

pushPluginLoadFailedEvent(options?)

• Call this method when your plugin is failed to be used by vendor, including the view is not visible.
• Push event to google analytic with Epoch timestamp

Parameters

options(optional)
An object that contains configuration for the pushPluginLoadStartedEvent. Here is the available keys:

• timestamp: number
• reason: Error

No parameters

When no parameters are provided, the method will push event with

• Generated Epoch timestamp represent the current date and time as of the time of instantiation.
• Reason of the error will not be pushed.

Usage -

// After plugin has failed to load
pushPluginLoadFailedEvent();

// Push failed event with reason
const reason = new Error('This the example error.')
pushPluginLoadFailedEvent({ reason });

// Push failed event with timestamp
const timestamp = Date.now();
pushPluginLoadFailedEvent({ reason, timestamp });

pushPluginViewEvent()

• Call this method when your plugin is visible to vendor.
• Unlike pushPluginLoadCompletedEvent, loading time is not meassured when the event was sent.

Usage -

// After plugin is visible to vendor
pushPluginViewEvent();

pushSectionViewEvent(options)

• Call this method when a section of your plugin is visible to vendor.

Parameters

options(required)
An object that contains configuration for the pushSectionViewEvent. Here is the available keys:

• sectionId: string
• sectionName: string

Usage -

// After Choice Groups Section from Menu Management plugin is visible to vendor
pushSectionViewEvent({ sectionId: 'choice-groups', sectionName: 'Choice Groups Section' });

// After Add Listing Image Section from Onboarding plugin is visible to vendor
pushSectionViewEvent({ sectionId: 'listing-image', sectionName: 'Listing Image Section' });

pushItemClickEvent(options)

• Call this method when a section of your plugin is visible to vendor.

Parameters

options(required)
An object that contains configuration for the pushItemClickEvent. Here is the available keys:

• itemId: string
• itemName: string
• sectionId?: string
• sectionName?: string

Usage -

// After Create Choice Group Button from Menu Management plugin has been clicked by vendor
pushItemClickEvent({
  itemId: 'create-choice-group',
  itemName: 'Create Choice Group',
  sectionId: 'choice-groups',
  sectionName: 'Choice Groups Section'
});

// After Add Listing Image Section from Onboarding plugin has been clicked by vendor
pushItemClickEvent({
  itemId: 'add-listing-image',
  itemName: 'Add Listing Image',
  sectionId: 'listing-image',
  sectionName: 'Listing Image Section'
});

// After End of Day Report Button from Reporting plugin has been clicked by vendor
// Section id and section name have not been sent
pushItemClickEvent({ itemId: 'eod-report-button', itemName: 'Open End of Day Report' });