The Gridaly app allows you to connect your own Google Tag Manager container to send standard and dedicated events related to the registration process and event buying path.
From this article you will learn:
What is Google Tag Manager?
How to configure Google Tag Manager with Gridaly?
What is Google Analytics (GA4)?
How to configure Google Analytics (GA4)?
Configuring events with Gridaly
What is Google Tag Manager?
Google Tag Manager (GTM) is an advanced yet user-friendly tool for managing tags (tags) on a website or mobile app. It allows you to centrally add, edit and control tracking scripts - without having to intervene in the website's source code each time.
With GTM, it is possible to easily implement and configure such solutions as:
Google Analytics, Google Ads, Facebook Pixel,
remarketing codes,
conversion tracking tools,
third-party analytics solutions.
The system is based on the so-called container, which once implemented in the code of the site allows you to manage all tags from an intuitive administration panel. The user defines when and under what conditions a given tag should activate, using so-called triggers (triggers) and variables (variables), which gives great flexibility and precision.
How to configure Google Tag Manager with Gridaly?
To activate Google Tag Manager in Gridaly, simply add a container ID (Container ID) in the settings of a specific event.
Go to the event administration panel.
Then go to the Settings→Advanced tab .
Enter the Container ID in the Google Tag Manager field .
Save changes
What is Google Analytics (GA4)?
Google Analytics 4 (GA4) is the latest generation of Google's analytics platform, which enables comprehensive tracking and analysis of user behavior on websites and mobile applications. GA4 is distinguished by a modern event-based tracking data model, which allows for more flexible and detailed monitoring of user interactions.
GA4 integrates data from various sources, offering consistent and unified analysis of customer paths, regardless of the platform. This provides a more accurate understanding of the conversion process, identifying trends and optimizing marketing efforts.
How to configure Google Analytics (GA4) with Google Tag Manager?
To properly integrate the GTM container with Google Analytics 4, follow these steps:
Add a new tag „Google Analytics: GA4 Configuration”.
Enter the measurement identifier (Tag ID), which can be downloaded from the Google Analytics dashboard 4.
Configure triggers (trigger rules):
All Pages (running the tag on all pages)
History Change (launch the tag when the browser history changes)
Note: The Gridaly platform works as a Single Page Application (SPA), that is, without a full page refresh. Therefore, in order for the Google Analytics 4 integration to work properly, it is necessary to add a "History Change" trigger, which is responsible for tracking changes in page status without reloading.
Configuring events with Gridaly
Classic forms
Classic forms in the Gridaly system emit two basic events:
gridaly.formInit– triggered when the form is initiated (loaded),gridaly.formSubmitted– triggered after successful form submission.
In both cases, an additional form parameter - the form identifier - is sent to the DataLayer, which can be used in further analysis or integrations (e.g. in Google Tag Manager).
DataLayer
{
form: "hgb94ubpif", // Form id
}
Free registration
Gridaly's free registration process generates two key events:
gridaly.registrationInit–triggered when the registration form is initiated,gridaly.freeRegistrationCompleted– triggered after successful submission of the registration form.
Paid registration
Gridaly's paid registration process generates the following key events for detailed monitoring of user activities and purchase analytics:
gridaly.registrationInit– Registration form initiation,add_to_cart– Adding the product to your cart,remove_from_cart– removing a product from the cart,add_payment_info– adding payment information,purchase– making a purchase,gridaly.orderPageView– display of the order summary page.
Event gridaly.registrationInit is triggered when the payment form is initiated during the paid registration process.
As part of this event, the attribute type is passed , Which determines the context of the user's action:
new– placing a new order,extend–Expansion of an existing order (e.g., purchase of additional tickets or extras),upgrade– Change the type of ticket to a higher or different version.
DataLayer
{
type: ‘new’ | ‘extend’ | ‘upgrade’ // Registration flow
}
Event add_to_cart is triggered when a ticket or add-on is added to the cart during the paid registration process.
Key information about the current status of the shopping cart is passed to the DataLayer:
items–A dashboard containing detailed information about all items in the shopping cart when a new product is added,value– The total value of the basket after the change (expressed in the currency unit assigned to the event).
DataLayer
{
currency: "EUR", // Selected currency
value: 100, // Cart value
items: [{ // Currently selected items
item_id: "d0egu47dmn", // Ticket id
item_name: "Standard Ticket", // Ticket name
quantity: 1 // Number of selected tickets
}]
}
Event remove_from_cartis triggered when a ticket or add-on is removed from the shopping cart during the paid registration process.
In the DataLayer, the following data is transmitted to reflect the current state of the shopping cart after the change:
items–An array containing the current list of products in the shopping cart after the item has been removed,value–The total value of the basket after the change.
DataLayer
{
currency: "EUR", // Selected currency
value: 0, // Cart value
items: [] // Currently selected items
}
Event add_payment_info is triggered when the user completes the contact information and goes to the order summary page in the paid registration process.
DataLayer
{
currency: "EUR", // Selected currency
value: 100, // Cart value
items: [ // Currently selected items
{
item_id: "d0egu47dmn", // Ticket id
item_name: "Standard Ticket", // Ticket name
quantity: 1 // Number of selected tickets
}
],
coupon: "", // Used discount voucher
payment_type: "traditional" // Selected payment method
}
Event purchase is triggered when a transaction is finalized, that is, when a user places an order in the paid registration process.
This event passes complete transaction data to the DataLayer, which may include, but is not limited to:
order ID (np.
transaction_id),list of products purchased (
items),total contract value (
value),Payment methods used, discount coupons, taxes (depending on the configuration).
DataLayer
{
currency: "EUR", // Selected currency
value: 250, // Cart value
items: [ // Currently selected items
{
item_id: "d0egu47dmn", // Ticket id
item_name: "Standard Ticket", // Ticket name
quantity: 2 // Number of selected tickets
},
{
item_id: "t5gg19a3rs", // Addon id
item_name: "Workshop 1", // Addon name
quantity: 1 // Number of selected addons
},
],
coupon: "Z0AXNYLM", // Used discount voucher
payment_type: "stripe", // Selected payment method
transaction_id: "cdbbf30e-2ea4-4025-9565-e3a685b8e3a8" // Payment unique id
}
Event gridaly.orderPageView is triggered when the order page is loaded, which is displayed to the user after the payment process is completed.
Note:
The order page is loaded regardless of the payment status - this means that the user is redirected to it both after successful completion of the transaction and in case of payment failure (e.g. cancellation, error or rejection of the transaction).
DataLayer
{}
Event handling
In order to properly handle the events emitted by the Gridaly platform, you need to:
Add a Custom Event rule in the Trigger Rules (Triggers ) section of the Google Tag Manager panel,
In the Event Name field, enter the exact name of the event (e.g.
gridaly.formSubmitted,purchase, itp.),Assign the created rule as a Trigger Rule to the corresponding Tag.
