Skip to main content

How does it work with Google Tag Manager?

Prerequisites​

Google Tag Manager Integration​

K3 sends JavaScript events via window.postMessage, which can be easily forwarded to Google Tag Manager. This solution will be more modern and flexible than direct Analytics integration.

Event Structure​

The event listener looks like this:

window.addEventListener(
  "message",
  function (event) {
    // K3 Events an Google Tag Manager weiterleiten
    if (event.data && event.data.type && event.data.type.startsWith("K3")) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: event.data.type,
        k3_action: event.data.action,
        k3_label: event.data.label,
        k3_category: event.data.category,
      });
    }
  },
  false,
);

Available Events​

Currently, K3 sends the following events via window.postMessage:

K3AppLoaded - App component loaded

  • Sent when the configurator app component is loaded

K3DSceneLoaded - 3D scene loaded

  • Sent when the 3D scene is fully loaded

K3ValiditiesLoaded - Validations loaded

  • Sent when all rule validations are loaded

K3FullyLoaded - Configurator fully loaded

  • Sent when all components (app, 3D scene, validations) are loaded

K3ConfigurationSaved - Configuration saved

{
  type: "K3ConfigurationSaved",
  actionKey: "cart", // Schlüssel der Speicher-Aktion (siehe unten)
  code: "abc123def", // Generierter Konfigurations-Code
  customer: {
    "address": null,
    "dataPrivacy": "Die Datenschutzhinweise habe ich zur Kenntnis genommen und akzeptiere sie.",
    "name": "Mustermann",
    "email": "mustermann@test.test",
    "phone": null,
    "remark": null,
    "company": null,
    "taxID": null,
    "checkboxAccepted": true
  }
}
  • Sent when a configuration is saved
  • actionKey: Determined in this order:
    1. The actionKey field of the action in the app settings (recommended)
    2. The id field of the action
    3. The translated label of the action (for the active language)
    4. "unknown" as the last fallback
  • code: The unique configuration code
  • customer: Customer data (only if customer data is requested)

Benefits of GTM Integration​

  • Flexibility: Use your existing GTM
  • Data Protection: Full control over cookie consent
  • Consistency: All events via a single GTM instance
  • Advanced functionality: GTM features such as custom events and triggers

Connecting Google Analytics​

danger

Direct connection to Analytics will no longer be supported in the near future.

K3 can track the use of your configurator in your Analytics account.

  • First, find your Analytics Property ID:
  • To do this, open your Analytics account and go to
    Loading...
    .
  • Then select the property you want the configurator to track and click
    Loading...
    .
  • Click on the stream you want to use.
  • Under "MESS-ID," you’ll now find the string you’re looking for in the format "G-XXXXXXXXX."
  • Now open your configurator’s settings by clicking the gear icon next to the configurator in the list of all configurators or by clicking
    Loading...
    in the preview.
  • Enter the tracking ID under
    Loading...
    .
warning

K3 does not display a cookie banner. Please ensure on your website or online store that your users have consented to the use of cookies.

tip

If the configurator is launched with the parameter ?ga=false, it does not send data to Google Analytics. You can add this, for example, if the user has not consented to the setting of cookies.

What is tracked?​

After a while, you’ll find the results in your Analytics account under

Loading...
>
Loading...
:

  • Launch of the configurator:
    • event_category: "K3:" and configurator and ":loaded"
    • event_action: "loaded"
    • event_label: Inspiration code or "app"
  • Saving a configuration:
    • event_category: "K3:" and Configurator and ":saved"
    • event_action: "saved"
    • event_label: Button used to save
  • AR:
    • event_category: "K3:" and Configurator and ":saved"
    • event_action: "saved"
    • event_label: "ar"
  • A new step was selected:
    • event_category: Configurator and ":step"
    • event_action: "step"
    • event_label: Step label
  • Attribute was changed:
    • event_category: "K3:" and Configurator and ":action"
    • event_action: Attribute label
    • event_label: Value label (for components, "+" or "-" is prepended to distinguish between adding and removing)

You’ll see the event_action as the event name in GA4. Set up the additional parameters event_category and event_label in Analytics as follows:

  • Click "Admin," then under "Data View," click "Custom Definitions"
  • Click "Create Custom Dimension"
  • Enter: Dimension Name: event_category Description: Event Category Event Parameter: event_category
  • Follow the same steps for event_label.