Appearance
Track configurator activity
Use plugin events to send supported product activity to a browser data layer. Keep analytics naming and destination configuration in plugin options.
Define the options
ts
type AnalyticsOptions = {
dataLayerName?: string
eventPrefix?: string
}Push selected events
ts
import { PLUGIN_API_VERSION, definePlugin } from '@iconfigurators/plugin-sdk'
export default definePlugin<AnalyticsOptions>({
id: 'customer.analytics',
version: '1.0.0',
apiVersion: PLUGIN_API_VERSION,
setup(api, configuredOptions) {
const options = {
dataLayerName: 'dataLayer',
eventPrefix: 'icon_visualizer',
...configuredOptions,
}
const host = window as unknown as Record<string, unknown>
const existingLayer = host[options.dataLayerName]
const dataLayer: unknown[] = Array.isArray(existingLayer) ? existingLayer : []
host[options.dataLayerName] = dataLayer
api.events.on('wheel:viewed', (event) => {
dataLayer.push({
event: `${options.eventPrefix}_wheel_viewed`,
source: event.data.source,
wheelImageId: event.data.wheelImageId,
partNumber: event.data.partNumber,
})
})
api.events.on('rfq:submitted', (event) => {
dataLayer.push({
event: `${options.eventPrefix}_rfq_submitted`,
success: event.data.success,
})
})
},
})Known event names infer their payload types from the SDK. Subscribe only to events needed by the analytics plan.
Configure and queue
ts
queuePlugin(analyticsPlugin, {
order: 40,
required: false,
options: {
dataLayerName: 'YOUR_DATA_LAYER',
eventPrefix: 'YOUR_EVENT_PREFIX',
},
})Data guidance
- Send stable identifiers and explicit public fields instead of entire event objects.
- Do not put customer contact details or credentials into analytics payloads.
- Keep analytics optional so a vendor failure cannot stop the configurator.
- Validate the final payload in the browser before enabling production collection.
If the standard built-in behavior is sufficient, configure the analytics built-in instead of maintaining custom code.