Skip to content

fix: include items array in purchase dataLayer #8339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
benceruleanlu merged 1 commit into from
Jan 27, 2026
Merged

fix: include items array in purchase dataLayer #8339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/platform/cloud/subscription/composables/useSubscription.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,10 +237,14 @@ describe('useSubscription', () => {
event: 'purchase',
transaction_id: 'sub_123',
currency: 'USD',
item_id: 'monthly_creator',
item_variant: 'monthly',
item_category: 'subscription',
quantity: 1
items: [
{
item_id: 'monthly_creator',
item_variant: 'monthly',
item_category: 'subscription',
quantity: 1
}
]
Comment on lines +240 to +247
Copy link

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test assertion is incomplete. The implementation includes item_name and price fields in the items array (lines 132 and 135 in useSubscription.ts), but the test doesn't verify these fields are present. For a monthly creator subscription, these should be:

  • item_name: The translated plan name (e.g., "Creator")
  • price: 35 (the monthly price for creator tier)

Additionally, the test should verify the top-level value field is set to 35.

Copilot uses AI. Check for mistakes.
Comment on lines +240 to +247
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Locate and read the test file to see the actual content at lines 240-247
fd -e test.ts -p "useSubscription" | head -5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 374

🏁 Script executed:

# Search for the useSubscription.test.ts file
find . -name "useSubscription.test.ts" -type f

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 139

🏁 Script executed:

# Try a broader search for subscription test files
fd "useSubscription" -t f

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 728

🏁 Script executed:

# Read the test file, focusing on lines 240-247 and surrounding context
sed -n '230,260p' src/platform/cloud/subscription/composables/useSubscription.test.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 976

🏁 Script executed:

# Get total line count to understand the file size
wc -l src/platform/cloud/subscription/composables/useSubscription.test.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 141

🏁 Script executed:

# Search for the test containing the items payload to understand context
rg "item_id.*monthly_creator" src/platform/cloud/subscription/composables/useSubscription.test.ts -A 10 -B 10

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 636

🏁 Script executed:

# Read the useSubscription.ts implementation to see what's being pushed to dataLayer
rg "item_id.*monthly_creator" src/platform/cloud/subscription/composables/useSubscription.ts -A 10 -B 10

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Broader search for dataLayer push in the implementation
rg "dataLayer" src/platform/cloud/subscription/composables/useSubscription.ts -A 5 -B 5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Search for item_name or price being set in subscription composables
rg "item_name|item_price|price.*subscription" src/platform/cloud/subscription/ -t ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 163

🏁 Script executed:

# Read the implementation file to see the full dataLayer payload being constructed
cat -n src/platform/cloud/subscription/composables/useSubscription.ts | sed -n '1,100p'

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 4233

🏁 Script executed:

# Search for where the dataLayer event is constructed - look for item_name context
rg "item_name" src/platform/cloud/subscription/composables/useSubscription.ts -B 5 -A 5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 345

🏁 Script executed:

# Search for price in the subscription context
rg "price" src/platform/cloud/subscription/composables/ -t ts -B 2 -A 2

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 519

🌐 Web query:

GA4 ecommerce purchase event items array required fields documentation

💡 Result:

For GA4 ecommerce (including the purchase event), the items parameter is an array of Item objects. For each object in items, the only required item-level fields are:

  • item_id (string) — required if item_name isn’t sent
  • item_name (string) — required if item_id isn’t sent

In other words: each item must include at least one of item_id or item_name; everything else in the item object is optional. [1]

Related implementation notes from Google’s docs:

  • purchase should include the event-level items array; if required ecommerce parameters are missing, GA4 may treat it as a custom event rather than an ecommerce event. [3]
  • items can include up to 200 items per event. [2]
  • You can add up to 27 custom item-scoped parameters (in addition to Google’s predefined item parameters). [4]

Sources: Google Analytics developer documentation. [1] [2] [3] [4]

🏁 Script executed:

# Let me get more context around the dataLayer push to understand the full picture
rg "pushDataLayerEvent\|dataLayer.push" src/platform/cloud/subscription/composables/useSubscription.ts -B 10 -A 10

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 52

🏁 Script executed:

# Search for the dataLayer event construction with different pattern
rg "event.*purchase" src/platform/cloud/subscription/composables/useSubscription.ts -B 15 -A 5

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 801

🏁 Script executed:

# Look at the entire section where the items array is built
sed -n '100,250p' src/platform/cloud/subscription/composables/useSubscription.ts

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 4294

Assert item_name and price in the items payload.

The test omits assertions for fields that are being sent in the actual payload. Add assertions to verify item_name and price presence to catch regressions where these fields might be removed.

Suggested test update 
        items: [
          {
            item_id: 'monthly_creator',
+           item_name: expect.any(String),
            item_variant: 'monthly',
            item_category: 'subscription',
+           price: expect.any(Number),
            quantity: 1
          }
        ]
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
items: [
{
item_id: 'monthly_creator',
item_variant: 'monthly',
item_category: 'subscription',
quantity: 1
}
]
items: [
{
item_id: 'monthly_creator',
item_name: expect.any(String),
item_variant: 'monthly',
item_category: 'subscription',
price: expect.any(Number),
quantity: 1
}
]
🤖 Prompt for AI Agents 
In `@src/platform/cloud/subscription/composables/useSubscription.test.ts` around
lines 240 - 247, The test currently asserts the items payload only contains
item_id, item_variant, item_category, and quantity for the item with item_id
'monthly_creator' but is missing assertions for item_name and price; update the
test in useSubscription.test.ts to also assert that items[0].item_name and
items[0].price are present (e.g.,
expect(payload.items[0].item_name).toBeDefined() or equal the expected string,
and expect(payload.items[0].price).toBeDefined() or equal the expected numeric
value) so the spec catches regressions that remove those fields.

})
expect(localStorage.getItem('pending_subscription_purchase')).toBeNull()
})
Expand Down
17 changes: 10 additions & 7 deletions src/platform/cloud/subscription/composables/useSubscription.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,18 +121,21 @@ function useSubscriptionInternal() {
: baseName
const unitPrice = getTierPrice(tierKey, isYearly)
const value = isYearly && tierKey !== 'founder' ? unitPrice * 12 : unitPrice

pushDataLayerEvent({
event: 'purchase',
transaction_id: status.subscription_id,
value,
currency: 'USD',
item_id: `${billingCycle}_${tierKey}`,
item_name: planName,
item_category: 'subscription',
item_variant: billingCycle,
price: value,
quantity: 1
items: [
{
item_id: `${billingCycle}_${tierKey}`,
item_name: planName,
item_category: 'subscription',
item_variant: billingCycle,
price: value,
quantity: 1
}
]
})

clearPendingSubscriptionPurchase()
Expand Down
Loading