Skip to content

feat: ga analytics qr code click support #26

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
rongquan1 merged 7 commits into from
Sep 15, 2025
Merged

feat: ga analytics qr code click support #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b559840
feat: gtm setup for ga analytics
moiz-sgtradex Sep 12, 2025
f080782
feat: update gtm service
moiz-sgtradex Sep 12, 2025
42dbc31
feat: temp log
moiz-sgtradex Sep 12, 2025
e0996b1
feat: type import update
moiz-sgtradex Sep 12, 2025
28fcad7
feat: document qr click event
moiz-sgtradex Sep 15, 2025
5889457
Merge branch 'main' into feat/ga-analytics-support
moiz-sgtradex Sep 15, 2025
a805789
feat: qr click update
moiz-sgtradex Sep 15, 2025
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: 9 additions & 3 deletions src/components/content/DocumentStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,20 @@ export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusCl
<DialogTrigger asChild>
<div
className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer"
onClick={() =>
onClick={() => {
Comment on lines 22 to +24
Copy link

@coderabbitai coderabbitai bot Sep 15, 2025

Choose a reason for hiding this comment

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

🛠️ 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.

Suggested change
<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,
});
Comment on lines +25 to +30
Copy link

@coderabbitai coderabbitai bot Sep 15, 2025

Choose a reason for hiding this comment

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

💡 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 send document_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 add document_id once 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).

onStatusClick({
url: status.url[selectedSchema],
documentId: id,
label: status.label,
documentTitle: title,
})
}
});
}}
>
<div className="w-4 h-4 flex items-center justify-center">
<img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" id="qr-code-icon" />
Expand Down
1 change: 0 additions & 1 deletion src/lib/gtmService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { GADataLayerEvent } from '../types/types';
// Initialize GTM immediately when this module is imported
const gtmId = import.meta.env.VITE_GTM_ID;
if (gtmId) {
console.log('Initializing GTM for analytics');
TagManager.initialize({
gtmId,
});
Expand Down