Implementing a Data Layer on Kreezalid

The data layer is an essential tool for tracking user behaviors and transactions within an online marketplace. It captures real-time user interactions, from viewing product listings, search queries, and media engagements to more complex actions like navigating the checkout process, form submissions, and account creations.

Implementing a data layer for tracking performance involves inserting a structure in your website's code where various data about the user's actions can be stored. This data layer then integrates with analytics platforms, such as Google Analytics, to provide insight into user behavior.

This guide provides steps for integrating a data layer on a Kreezalid-powered platform using the Liquid template language. In our illustrative example, we'll focus on monitoring successful transactions, emphasizing the capture of order specifics and the cumulative amount. Feel free to modify this framework to observe other key performance indicators like account registrations, new listing additions, or any metric pertinent to your operations.

Initialize the Data Layer


Before any scripts or tags, ideally in the <head> section of your site's HTML, initialize an empty data layer object:

window.dataLayer = window.dataLayer || [];

This code checks if dataLayer already exists. If it doesn't, it initializes an empty array.

Inject Dynamic Data with Liquid


Within your Kreezalid platform, use the Liquid language to pull dynamic content and push it into the data layer.

For example, let's say you want to track a user's purchase:
{% for order in orders %}
<script>
window.dataLayer.push({
    'event': 'purchase',
    'transactionId': '{{ order.id }}',
    'transactionTotal': {{ order.amount }},
    'transactionProducts': [
        {% for item in order.order_items %}
            {
                'id': '{{ item.id }}',
                'category': '{{ item.listing.category.title }}',
                'sku': '{{ item.listing.sku }}',
                'name': '{{ item.listing.title }}',
                'price': {{ item.total_amount }},
                'currency': {{ item.currency }}
            },
        {% endfor %}
    ]
});
</script>
{% endfor %}


In this example, when a purchase is made, the order's details are pushed into the data layer.

To explore the full range of variables you can dispatch to the Data Layer, kindly refer to this page on our developers' documentation.

Integrate with Tag Management System


Use a Tag Management System (TMS), such as Google Tag Manager (GTM), to read the data layer and trigger various tags based on the data.

For GTM:
Set up a new account or container.
Implement the GTM script in your Kreezalid platform, as directed.
In GTM, set up triggers and tags based on the data layer events you've defined (e.g., the 'purchase' event).
Link GTM to your analytics platform.

For a detailed walkthrough of the process, please refer to our documentation: Setting up Google Tag Manager.

Test


Always test any changes or additions to ensure the data is correctly pushed into the data layer and properly read by your TMS:

Conduct typical user actions on your site (e.g., make a purchase).
Check if the expected data appears in the data layer (use browser developer tools).
Verify that your TMS is triggering the correct tags.
Check your analytics platform for the expected data.

Iterate


Expand on this foundation as necessary. As you identify additional user behaviors or events you want to track, modify your Liquid templates to push the relevant data into the data layer.

Remember, performance tracking should be an ongoing effort. Continually monitor your analytics, adjust your data layer and tracking mechanisms as needed, and refine your understanding of user behavior to improve platform performance.

Updated on: 10/10/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!