feat: ga analytics qr code click support #26
Conversation
✅ Deploy Preview for tradetrust-gallery ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughAdds analytics instrumentation: clicking the QR area in DocumentStatus now fires a GA event (sendGAEvent) with title, schema, and status before invoking onStatusClick. Also removes a runtime console.log from GTM initialization in gtmService. No public API or export signatures changed. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as DocumentStatus (QR area)
participant GA as sendGAEvent
participant App as onStatusClick
User->>UI: Click QR area
UI->>GA: sendGAEvent('document_qr_click', { title, schema, status })
GA-->>UI: ack
UI->>App: onStatusClick(...)
App-->>UI: return
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/components/content/DocumentStatus.tsx (1)
40-41: Avoid duplicate IDs within a list
id="qr-code-icon"will repeat for every item rendered, which is invalid HTML and can break selectors/tests. Remove the id or switch todata-testid.- <img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" id="qr-code-icon" /> + <img className="w-[13px] h-[13px]" alt="QR code icon" src="/qrcode.svg" data-testid="qr-code-icon" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/content/DocumentStatus.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/content/DocumentStatus.tsx (1)
src/lib/gtmService.ts (1)
sendGAEvent(13-19)
🔇 Additional comments (1)
src/components/content/DocumentStatus.tsx (1)
24-37: Confirm GA event type covers the new fields (or add a specific event type).src/types/types.ts exports GADataLayerEvent — ensure it allows the keys used here: document_qr_title, document_qr_schema, document_qr_status, document_title, preview_title. If not, either widen GADataLayerEvent (e.g., add an index signature) or create/use a narrow interface for these events (e.g., DocumentQrClickEvent, DocumentPreviewEvent) and pass that to sendGAEvent. Occurrences to check: src/components/content/DocumentStatus.tsx (document_qr_click, document_type) and src/components/content/DocumentPreview.tsx (document_preview).
| <div | ||
| className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer" | ||
| onClick={() => | ||
| onClick={() => { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Use a semantic button for the clickable control
This is an interactive control inside a dialog trigger; a <div> is not keyboard-focusable by default. Prefer a <button> (or add proper a11y props) to meet a11y expectations.
- <div
- className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer"
- onClick={...}
- >
+ <button
+ type="button"
+ aria-label={`Open ${status.label} QR code`}
+ className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer"
+ onClick={...}
+ >Remember to close with </button> where the </div> currently is.
📝 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.
| <div | |
| className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer" | |
| onClick={() => | |
| onClick={() => { | |
| <button | |
| type="button" | |
| aria-label={`Open ${status.label} QR code`} | |
| className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer" | |
| onClick={() => { |
🤖 Prompt for AI Agents
In src/components/content/DocumentStatus.tsx around lines 22 to 24, the
interactive element is a <div> which is not keyboard-focusable; replace it with
a semantic <button> element (type="button") keeping the same className and
onClick handler, ensure you add an accessible label (aria-label or visible text)
if there is no textual content, and close with </button> where the </div>
currently is so the control is keyboard operable and meets a11y expectations.
| sendGAEvent({ | ||
| event: 'document_qr_click', | ||
| document_qr_title: title, | ||
| document_qr_schema: selectedSchema, | ||
| document_qr_status: status.label, | ||
| }); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Normalize analytics payload keys with existing link click event
The link below uses document_title/document_schema/document_status. Using document_qr_* here creates two schemas to maintain. Align keys and add document_id for parity and queryability.
- sendGAEvent({
- event: 'document_qr_click',
- document_qr_title: title,
- document_qr_schema: selectedSchema,
- document_qr_status: status.label,
- });
+ sendGAEvent({
+ event: 'document_qr_click',
+ document_title: title,
+ document_schema: selectedSchema,
+ document_status: status.label,
+ document_id: id,
+ });Please confirm GTM mappings expect these field names and that GADataLayerEvent typing allows them.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Searching for sendGAEvent usages ==="
rg -n --hidden --no-ignore "sendGAEvent" -S || true
echo
echo "=== Searching for GADataLayerEvent type/usage ==="
rg -n --hidden --no-ignore "GADataLayerEvent" -S || true
echo
echo "=== Searching for document_* analytics keys (document_title, document_schema, document_status, document_qr_*, document_id) ==="
rg -n --hidden --no-ignore "document_title|document_schema|document_status|document_qr_title|document_qr_schema|document_qr_status|document_qr_click|document_id" -S || true
echo
echo "=== Locate DocumentStatus.tsx files ==="
find . -maxdepth 6 -type f -name 'DocumentStatus.tsx' -print || true
echo
echo "=== Show up to first 300 lines of any DocumentStatus.tsx found ==="
while IFS= read -r file; do
echo "---- FILE: $file ----"
sed -n '1,300p' "$file" || true
done < <(find . -maxdepth 6 -type f -name 'DocumentStatus.tsx' -print) || true
echo
echo "=== Search for sendGAEvent definition(s) ==="
rg -n --hidden --no-ignore "function sendGAEvent|export function sendGAEvent|export const sendGAEvent|const sendGAEvent =|sendGTMEvent" -S || true
echo
echo "=== Search for GA data layer typing (interfaces / types) ==="
rg -n --hidden --no-ignore "interface .*GADataLayerEvent|type .*GADataLayerEvent|export .*GADataLayerEvent" -S || true
echo
echo "=== Done ==="Length of output: 2226
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== src/types/types.ts ==="
if [ -f src/types/types.ts ]; then
sed -n '1,240p' src/types/types.ts
else
echo "NOT FOUND: src/types/types.ts"
fi
echo
echo "=== src/lib/gtmService.ts ==="
if [ -f src/lib/gtmService.ts ]; then
sed -n '1,240p' src/lib/gtmService.ts
else
echo "NOT FOUND: src/lib/gtmService.ts"
fi
echo
echo "=== src/components/content/DocumentStatus.tsx ==="
if [ -f src/components/content/DocumentStatus.tsx ]; then
sed -n '1,240p' src/components/content/DocumentStatus.tsx
else
echo "NOT FOUND: src/components/content/DocumentStatus.tsx"
fi
echo
echo "=== src/components/content/DocumentPreview.tsx ==="
if [ -f src/components/content/DocumentPreview.tsx ]; then
sed -n '1,240p' src/components/content/DocumentPreview.tsx
else
echo "NOT FOUND: src/components/content/DocumentPreview.tsx"
fi
echo
echo "=== Search for any document_id occurrences ==="
rg -n --hidden --no-ignore "document_id" -S || echo "no matches"Length of output: 6261
Normalize analytics keys and add document_id — fix typing & verify GTM mappings
- GADataLayerEvent (src/types/types.ts) is
{ event: string } & Record<string, string>— all payload values must be strings. - Adding
document_id: id(number) will cause a TypeScript error; either senddocument_id: String(id)or widen GADataLayerEvent to accept number values. - Align the QR payload with the existing link keys (
document_title,document_schema,document_status) and adddocument_idonce you confirm GTM mappings expect these field names.
Location: src/components/content/DocumentStatus.tsx (sendGAEvent call in the QR DialogTrigger onClick).
🤖 Prompt for AI Agents
In src/components/content/DocumentStatus.tsx around lines 31 to 36, the
analytics payload uses non-normalized keys and may pass a number for document_id
which violates GADataLayerEvent (Record<string, string>) — rename the QR event
fields to match existing link keys (use document_title, document_schema,
document_status), add document_id as a string (e.g., String(id)) to avoid the
TypeScript error, and ensure every value passed to sendGAEvent is a string (or
alternatively widen GADataLayerEvent in src/types/types.ts to accept number
values if you prefer numeric ids).
Summary
Added QR code click event support
Summary by CodeRabbit