Lesson 14 of 15
Reshape Data For GA4 (Custom JS)
① Connect your GTM container
Paste your container ID to load it into this page. It only ever runs here.
Advanced: use a specific environment
The dataLayer a developer gives you is often close to what GA4 wants, but not quite. The keys are named differently, prices arrive as strings, the structure is almost right. Waiting on a code change can take weeks, so you fix the shape inside GTM instead.
A Custom JavaScript variable can read the raw array and .map() each item into GA4's expected items shape, renaming keys and converting string prices to numbers on the way. It is the single most common real use of JavaScript in GTM.
Goal
Reshape the raw order into GA4 items with a Custom JavaScript variable, and fire a purchase tag on the order event.
Build it in GTM
Capture the raw data with dataLayer variables
Make DLVs for products and order_total.Create a Custom JS variable: GA4 items
Map each product to { item_id, item_name, price: Number(cost), quantity: qty } and return the new array.Create a Custom JS variable: order value
Return Number({{DLV - order_total}}) so value is a number, not a string.Wire the GA4 purchase tag
Event = purchase, items = your reshaped array, value = your numeric total, on a Custom Event trigger for 'order'.
Debug in Tag Assistant
Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.
- In your GTM, click Preview.
- Paste the live URL above and click Connect.
- Interact with the live page and watch your tag fire in Tag Assistant.
What you should expect to see
item_id, item_name, numeric price and quantity, and the GA4 purchase tag fires on the order event.Verify your container
Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.
Drop your container .json here
or browse · checked in your browser, nothing is uploaded