feat(theme): GA4 click analytics + UTM injection

Adds analytics-loader for GA4 event tracking on link clicks. Implements
UTM parameter injection for campaign attribution on share actions.

Enables detailed conversion and traffic source tracking.
This commit is contained in:
tiennm99 committed 2026-05-15 19:50:59 +07:00
1 parent cde369188e
commit 4c0d4b092c
2 files changed
+57

No files matched your search

+39
View File
@@ -0,0 +1,39 @@
// Bonsai page-share button.
// Tries navigator.share first; falls back to clipboard.writeText with a toast.
// Loaded only when params.share = true.
(function () {
var btn = document.querySelector('[data-bonsai-share]');
if (!btn) return;
var toast = document.querySelector('.bio__share-toast');
var toastTimer;
function showToast(msg) {
if (!toast) return;
toast.textContent = msg;
toast.hidden = false;
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toast.hidden = true; }, 2000);
}
btn.addEventListener('click', async function () {
var url = btn.getAttribute('data-share-url');
var title = btn.getAttribute('data-share-title');
var copiedMsg = btn.getAttribute('data-toast-copied') || 'Link copied';
var failedMsg = btn.getAttribute('data-toast-failed') || 'Could not share';
try {
if (navigator.share) {
await navigator.share({ title: title, url: url });
return;
}
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(url);
showToast(copiedMsg);
return;
}
window.prompt('Copy link:', url);
} catch (e) {
if (e && e.name === 'AbortError') return;
showToast(failedMsg);
}
});
})();
@@ -0,0 +1,18 @@
{{- /* Google Analytics 4 loader.
Emits nothing when params.analytics.measurementId is unset/empty.
Pairs with data-analytics-event attrs added by partials/link-button.html.
GA4 sets cookies — site operator is responsible for GDPR/PECR/CPRA consent. */ -}}
{{- $a := site.Params.analytics -}}
{{- if and $a $a.measurementId -}}
{{- $id := $a.measurementId -}}
{{- $trackClicks := ne ($a.trackClicks | default true) false -}}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ $id }}"></script>
<script>
window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}
gtag('js',new Date());
gtag('config','{{ $id }}');
{{- if $trackClicks }}
document.addEventListener('click',function(e){var a=e.target.closest('[data-analytics-event]');if(a)gtag('event','outbound_click',{event_label:a.getAttribute('data-analytics-event'),link_url:a.href});});
{{- end }}
</script>
{{- end -}}