Pushing custom attributes into dataLayer[] object

dataLayer

The dataLayer is a global JavaScript object that holds information regarding different interactions that occur in the page. Just like native JavaScript arrays, it has a push() method that can be used to update the dataLayer with new values. A typical push would look like this:

dataLayer object can hold any type of data but it's main purpose is to hold information that can be passed to Google Tag Manager tags for reporting purposes. The dataLayer object itself is like an observable object.By using special triggers in Google Tag Manager, it is possible to have certain tags fired only when certain events are being pushed into dataLayer object. Each event push can also hold additional information that is used by the tag for whatever needs may be.

For example, Google Analytics 4 tracking is based on specific set of events and parameters which include but are not limited to: page_view, view_item_list, view_item, select_item, remove_from_cart, add_to_cart, begin_checkout, add_payment_info, add_shipping_info, purchase and more.

Each of these events require a specific payload and come with additional parameters required by the tags that may fire. For example, a 'purchase' event may look like this

As you can see from the previous dataLayer.push() example, the 'purchase' event includes also an 'ecommerce' payload with specific data such as used currency, items purchased an more. All this is automated in our GA4 extension for Magento 2. It automatically builds the entire payload and does the push for you.

However there are situations where this payload must be modified and include an extended range of values specific to your products. This would usually require a skilled developer that needs to make customizations in the code. This could be potentially expensive and could impact the ability to perform future updates of the extension.

To cope with that, we have designed the extension to dispatch multiple events before each push allowing developers to access payload before it gets pushed into dataLayer object. This way you can not only access the data but add more data or modify existing one.

The list of events that we dispatch includes:

ec_get_widget_click_attributes
Allows 3rd party modules to modify widget click attributes e.g. data-attributes="{[]}"

ec_get_widget_add_list_attributes
Allows 3rd party modules to modify widget add to cart attributes e.g. data-attributes="{[]}"

ec_get_click_attributes
Allows 3rd party modules to modify product click attributes e.g. data-attributes="{[]}"

ec_get_add_list_attributes
Allows 3rd party modules to modify add to cart from categories attributes e.g. data-attributes="{[]}"

ec_get_click_list_attributes
Allows 3rd party modules to modify category click attributes e.g. data-attributes="{[]}"

ec_get_remove_attributes
Allows 3rd party modules to modify remove click attributes e.g. data-attributes="{[]}"

ec_get_add_attributes
Allows 3rd party modules to modify add to cart attributes e.g. data-attributes="{[]}"

ec_get_search_click_attributes
Allows 3rd party modules to modify search list attributes e.g. data-attributes="{[]}"

ec_get_checkout_attributes
Allows 3rd party modules to modify checkout step attributes e.g. data-attributes="{[]}"

ec_get_impression_item_attributes
Allows 3rd party modules to modify single item from impressions

ec_get_impression_data_after
Allows 3rd party modules to modify impressions array []

ec_get_detail_attributes
Allows 3rd party modules to modify detail attributes array []

ec_get_impression_related_attributes
Allows 3rd party modules to modify related attributes

ec_get_impression_upsell_attributes
Allows 3rd party modules to modify upsell attributes

ec_get_detail_data_after
Allows 3rd party modules to modify detail array []

ec_order_products_product_get_after
Allows 3rd party modules to modify single transaction product []

ec_order_products_get_after
Allows 3rd party modules to modify transaction products array

ec_get_purchase_attributes
Allows 3rd party modules to modify purchase attributes

ec_get_search_attributes
Allows 3rd party modules to modify search array attributes

ec_api_measurement_protocol_purchase
Allows 3rd party modules to modify payload for measurement protocol

ec_get_purchase_push_after
Allows 3rd party modules to modify the purchase push

 

Using these events is very easy and we have prepared a quick example. In the following example, we'll demonstrate how you can modify the data-attributes parameter used in the "Add to cart" button in categories and add custom attributes to the add_to_cart event. The steps include:

Step 1 - Define an event listener

In your own extension, you can create an event listener in etc/frontend/events.xml by adding the following:

Step 2 - Define the observer

Create a new file in Observer/ListAttributes.php with the following content:

The event listener is automatically passed current attributes as array and from then on it is really easy to modify this array and add new custom attributes. By doing this from your own module, the main GA4 extension is not modified and it can be updated to newer versions safely.

By exposing payload through different events, we have allowed developers to alter dataLayer for their own needs.