Add analytics

Learn how to bring the power of analytics to your widget.

Google Tag Manager

Track purchase events through Google Tag Manager.

Integrate the following code into the configuration in the keyId property from your DEUNA instance:

const deunaCheckout = window.DunaCheckout();

const config = {
    apiKey: "<Your public API key>",
    orderToken: "<order token>",
    analytics: {
        googleTagManager: {
            keyId: "GTM-XXX-XX"
        }
    }
};

deunaCheckout.configure(config);

Necessary attributes:

📘

For more information about Google Tag Manager, refer to Google's developer portal.

Actions and events

DEUNA widgets emit events through user interactions and internal functions.

Events are our way of letting you know when a relevant action happens at your checkout.

When an event occurs, the widget creates a new event with a unique name within the onEventDispatch function.

📘

OnEventDispatch returns event and data continuously.

When a payment is completed:

• A purchase event is created if the order is processed correctly.
• A purchaseError event is created if an error occurs and the order is not processed correctly.

The following diagram shows the sequence of events emitted by the widget during the purchase cycle:

Retrieve an event

TheOnEventDispatch function returnsevent and data continuously.

• event corresponds to the name of the event.
• data corresponds to useful information related to the event.

The following example redirects the user to a page after the purchase event is emitted:

const config = {
  apiKey: "...",
  env: "production",
  orderToken: "...",
  onEventDispatch: function (event, data) {
    if (event === 'purchase') {
    	window.location.href="https://www.somepage.com/orderCompleted";
    }
  }
};