June 2, 2024
Updated!

Custom events in Webflow for GTM & GA4

Webflow
JavaScript
Tracking

Everybody knows that most of the projects built on Webflow are marketing websites, and when marketing is mentioned, we always have GTM and GA4 in mind. Every Webflow developer is always asked to put a small snippet/script after the <head> tag in the settings and/or add a measurement ID in the integrations tab.

Whether you know what this is all about or not, it's pretty easy to just put that snippet in and forget about it. The marketing folks will do the rest and take it from here, right? Well, that’s not always the case.

There are always these default events for GTM and GA4, such as page_view, session_start, form_start, form_submit, etc. But what if you have a specific event that you want to watch out for? Or some sort of data that you wish to see on your analytics panel? How would you do this?

The dataLayer

The dataLayer is a JavaScript array used to collect and store data for use by various marketing and analytics tools, particularly Google Tag Manager (GTM) and Google Analytics. It serves as a structured way to pass information from your website.

Google Tag Manager uses the dataLayer to trigger tags and collect data. When data is pushed to the dataLayer, GTM listens for these changes and uses the data to execute tracking tags configured in GTM.

data layer example

How to push data to dataLayer?

Pushing data to the dataLayer is straightforward and involves using the push method to add objects containing your desired data.

Steps to Push Data to dataLayer

  1. Ensure that the dataLayer is initialized before you attempt to push data. This is typically done at the beginning of your HTML document or script.
window.dataLayer = window.dataLayer || [];
  1. Use the push method to add an object containing your data to the dataLayer. This object can include various key-value pairs representing the data you want to track.
window.dataLayer.push({
	'key1': 'value1',
    'key2': 'value2'
});

Example Scenarios

Tracking a Form Submission:

// Assuming userAgeGroup is a variable that holds the user's age group
var userAgeGroup = '25-34';

window.dataLayer.push({
    'event': 'formSubmission',
    'userAgeGroup': userAgeGroup
});

Tracking Page Views:

window.dataLayer.push({
    'event': 'pageView',
    'pagePath': '/home',
    'pageTitle': 'Homepage'
});

E-commerce Transaction:

window.dataLayer.push({
    'event': 'purchase',
    'transactionId': '12345',
    'transactionTotal': 99.99,
    'transactionProducts': [
        {
            'name': 'Product 1',
            'sku': 'P123',
            'price': 49.99,
            'quantity': 1
        },
        {
            'name': 'Product 2',
            'sku': 'P124',
            'price': 50.00,
            'quantity': 1
        }
    ]
});

Custom User Interactions:

window.dataLayer.push({
    'event': 'videoPlay',
    'videoTitle': 'Introduction to Our Product'
});

Google Tag Manager (GTM) Configuration

Let’s assume you have the GTM snippet in your website <head> and that other <noscript> in your website <body>. You also wrote the code already to push certain data to the dataLayer. It’s not over; there has to be some setup in GTM to recognize the data you are pushing and assign it to a variable.

In order to prepare a dataLayer variable on your GTM container and make sure it’s being brought as an event to your GA4 property, you can follow these steps:

Create a Data Layer Variable:

  • Go to GTM > Variables > New > Data Layer Variable.
  • Name: any_name
  • Data Layer Variable Name: (This should be the event parameter name you have in the dataLayer script)
data layer variable in GTM

Create a Trigger:

  • Go to GTM > Triggers > New > Trigger Configuration > Custom Event.
  • Name: Trigger Name.
  • Event Name: (this should be the same event name you are using in the dataLayer script).
Trigger in GTM

Create a GA4 Event Tag:

  • Go to GTM > Tags > New > Tag Configuration > GA4 Event Tag.
  • Configuration Tag: Set to your GA4 measurement ID.
  • Set event name (This is the event name that will show in your GA4 reports)
  • Set event parameters (here you should choose the variable)
  • Set the trigger (choose the trigger that you already created)
Create GA4 Event Tag
Choose the trigger for the GA4 Tag

Publish the GTM Container:

  • Publish the GTM container to make the changes live.

In conclusion

Incorporating custom events in Webflow for GTM and GA4 enhances your ability to track specific user interactions and gather detailed insights. By utilizing the dataLayer and configuring Google Tag Manager appropriately, you can capture and analyze a wide range of events that go beyond the default tracking capabilities. This empowers your marketing team to make data-driven decisions and optimize your website’s performance effectively.

Introduction

In this tutorial, I'll guide you through the process of building an interactive dynamic gallery using Webflow's CMS multi-image field feature. By the end of this tutorial, you'll have a visually appealing gallery where users can navigate through multiple images seamlessly.

Step 1: Setting Up Your Collection

Begin by creating a collection in Webflow with a multi-image field. For example, let's say you have a collection named "Recipes" with a gallery of images for each recipe.

Step 2: Addressing Lightbox Issues

If you try to use the lightbox component directly within a collection list linked to the multi-image field, you might face a problem. Each collection item ends up with a separate lightbox containing only one image. To resolve this, group all the lightboxes by assigning them a common group name. This ensures that all images are displayed together in the lightbox.

Step 3: Designing Your Gallery Layout

To achieve the desired gallery layout, create a separate collection list for the gallery. Limit the items displayed to 3. Style the list as a grid with 2 columns and add an overlay with "(+n)" indicating the number of additional images beyond the third one.

Use the following JavaScript code to modify the layout:

// Make the first image span 2 columns
var firstImg = document.querySelector(".gallery-list > div:nth-child(1)")
firstImg.style.gridArea = 'span 1/span 2/span 1/span 2';

// Hide overlay for items in the gallery, except for the third one if there are more than 3 images
var imgCount = document.querySelector('.lightbox-list').childElementCount
if (imgCount > 3) {
    var imgOverlay = document.querySelector('.gallery-list').children[2].children[0].children[1];
    imgOverlay.style.display = 'flex';
    imgOverlay.children[0].textContent = `+${imgCount - 3}`;
}

Step 3: Designing Your Gallery Layout

To ensure that clicking on images in the gallery opens the lightbox, use the following JavaScript code:

const imageWrappers = document.querySelectorAll('.image-wrapper');

for (let i = 0; i < imageWrappers.length; i++) {
    const imageWrapper = imageWrappers[i];
    const order = i + 1;

    imageWrapper.addEventListener('click', () => {
        console.log(`Image wrapper clicked! Order: ${order}`);
        document.querySelector(`.lightbox-list > div:nth-child(${order}) > a`).click()
    });
}

This code creates an array of gallery images and triggers a click event on the corresponding lightbox item when a gallery image is clicked. This way, users can seamlessly navigate through the images in the lightbox.

Conclusion

By following these steps and implementing the provided code snippets, you can create a dynamic and interactive image gallery in Webflow using CMS multi-image fields. This approach enhances user experience by allowing smooth navigation through multiple images within a cohesive lightbox environment.

Happy designing!

logo in footer
Copyrights 2024 © Abdelhalim Aljamal - All rights reserved.
Close
logo in navbar
Code copied to clipboard!