Add analytics

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

Track purchases with 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 Maganer, 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 continuosly.

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.

Event diagram

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

Retrieve an event

TheOnEventDispatch function reutrns event 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 purchaste event is emitted:

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