Skip to content
weballin

weballin DIGIWIKI

Data Layer

The data layer is a JavaScript object (array) that structures and delivers web page events, products, and user data to GTM and GA4. The developer generates an event with dataLayer.push(), and GTM connects this data to the tag and delivers it to GA4 and advertising pixels.

weballin

Without a data layer, it is not easy to 'pass the payment amount from the purchase completion page to GA4'. Developers must manually modify GA4 code each time. When using a data layer, the developer simply calls dataLayer.push() in a designated format when a page event occurs, and GTM receives the data and delivers it to GA4 and Google Ads.

The structure is to push an object into the window.dataLayer array. Example: dataLayer.push({'event':'purchase','value':150000,'item_name':'operation name'}). GTM's data layer variable reads this value and uses it as a tag parameter.

weballin designs a standard data layer for phone clicks (tel: anchor), reservation form submission, and KakaoTalk channel clicks on the hospital site. In particular, in the SPA (React/Next.js) environment, history API integration design is required to prevent the data layer from being initialized when navigating between pages.

Key takeaways

  • Structure page event data into a standard format that GTM and GA4 can read.
  • Separate developer and marketer roles: developers push data to the data layer, marketers set GTM tags.
  • E-commerce events (view_item·add_to_cart·purchase) are delivered to the standard GA4 schema.
  • In SPA (React/Next.js/Vue), manually trigger page movement events to the data layer.
  • The value pushed to the GTM data layer variable is automatically connected to the tag parameter.

References

Frequently asked questions

Is it necessary to use a data layer?

Although it is not required, it is practically necessary to transmit e-commerce event or form submission values to GA4. Without a data layer, values ​​must be read into GTM DOM element variables, which runs the risk of breaking tags every time the UI changes.

Why does the data layer not work well in SPA like Next.js?

SPA does not reload the entire HTML when navigating between pages, so the GTM page view trigger does not fire automatically. When changing routes, you must add code that manually calls dataLayer.push({event:'pageview', page:location.pathname}).

Who designs the data layer?

Data layer specifications are defined by marketers and analysts and implemented by developers. After analyzing the site, weballin provides a data layer design document and reviews it with the development team.

Related terms