The Trans Directory
fix(analytics): fix the load of the analytics scripts (#1865)
* fix(analytics): fix the load of the analytics scripts
* chore(lint): fix lint issues
+76
-57
+76
-57
quartz/plugins/emitters/componentResources.ts
+76
-57
quartz/plugins/emitters/componentResources.ts
···
88
88
if (cfg.analytics?.provider === "google") {
89
89
const tagId = cfg.analytics.tagId
90
90
componentResources.afterDOMLoaded.push(`
91
-
const gtagScript = document.createElement("script")
92
-
gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}"
93
-
gtagScript.defer = true
94
-
document.head.appendChild(gtagScript)
95
-
96
-
window.dataLayer = window.dataLayer || [];
97
-
function gtag() { dataLayer.push(arguments); }
98
-
gtag("js", new Date());
99
-
gtag("config", "${tagId}", { send_page_view: false });
100
-
101
-
document.addEventListener("nav", () => {
102
-
gtag("event", "page_view", {
103
-
page_title: document.title,
104
-
page_location: location.href,
91
+
const gtagScript = document.createElement('script');
92
+
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=${tagId}';
93
+
gtagScript.defer = true;
94
+
gtagScript.onload = () => {
95
+
window.dataLayer = window.dataLayer || [];
96
+
function gtag() {
97
+
dataLayer.push(arguments);
98
+
}
99
+
gtag('js', new Date());
100
+
gtag('config', '${tagId}', { send_page_view: false });
101
+
gtag('event', 'page_view', { page_title: document.title, page_location: location.href });
102
+
document.addEventListener('nav', () => {
103
+
gtag('event', 'page_view', { page_title: document.title, page_location: location.href });
105
104
});
106
-
});`)
105
+
};
106
+
107
+
document.head.appendChild(gtagScript);
108
+
`)
107
109
} else if (cfg.analytics?.provider === "plausible") {
108
110
const plausibleHost = cfg.analytics.host ?? "https://plausible.io"
109
111
componentResources.afterDOMLoaded.push(`
110
-
const plausibleScript = document.createElement("script")
111
-
plausibleScript.src = "${plausibleHost}/js/script.manual.js"
112
-
plausibleScript.setAttribute("data-domain", location.hostname)
113
-
plausibleScript.defer = true
114
-
document.head.appendChild(plausibleScript)
112
+
const plausibleScript = document.createElement('script');
113
+
plausibleScript.src = '${plausibleHost}/js/script.manual.js';
114
+
plausibleScript.setAttribute('data-domain', location.hostname);
115
+
plausibleScript.defer = true;
116
+
plausibleScript.onload = () => {
117
+
window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); };
118
+
plausible('pageview');
119
+
document.addEventListener('nav', () => {
120
+
plausible('pageview');
121
+
});
122
+
};
115
123
116
-
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
117
-
118
-
document.addEventListener("nav", () => {
119
-
plausible("pageview")
120
-
})
124
+
document.head.appendChild(plausibleScript);
121
125
`)
122
126
} else if (cfg.analytics?.provider === "umami") {
123
127
componentResources.afterDOMLoaded.push(`
124
-
const umamiScript = document.createElement("script")
125
-
umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js"
126
-
umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}")
127
-
umamiScript.setAttribute("data-auto-track", "false")
128
-
umamiScript.defer = true
129
-
document.head.appendChild(umamiScript)
128
+
const umamiScript = document.createElement("script");
129
+
umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js";
130
+
umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}");
131
+
umamiScript.setAttribute("data-auto-track", "false");
132
+
umamiScript.defer = true;
133
+
umamiScript.onload = () => {
134
+
umami.track();
135
+
document.addEventListener("nav", () => {
136
+
umami.track();
137
+
});
138
+
};
130
139
131
-
document.addEventListener("nav", () => {
132
-
umami.track();
133
-
})
140
+
document.head.appendChild(umamiScript);
134
141
`)
135
142
} else if (cfg.analytics?.provider === "goatcounter") {
136
143
componentResources.afterDOMLoaded.push(`
137
-
const goatcounterScript = document.createElement("script")
138
-
goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"
139
-
goatcounterScript.defer = true
140
-
goatcounterScript.setAttribute("data-goatcounter",
141
-
"https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count")
142
-
document.head.appendChild(goatcounterScript)
144
+
const goatcounterScript = document.createElement('script');
145
+
goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}";
146
+
goatcounterScript.defer = true;
147
+
goatcounterScript.setAttribute(
148
+
'data-goatcounter',
149
+
"https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count"
150
+
);
151
+
goatcounterScript.onload = () => {
152
+
window.goatcounter = { no_onload: true };
153
+
goatcounter.count({ path: location.pathname });
154
+
document.addEventListener('nav', () => {
155
+
goatcounter.count({ path: location.pathname });
156
+
});
157
+
};
143
158
144
-
window.goatcounter = { no_onload: true }
145
-
document.addEventListener("nav", () => {
146
-
goatcounter.count({ path: location.pathname })
147
-
})
159
+
document.head.appendChild(goatcounterScript);
148
160
`)
149
161
} else if (cfg.analytics?.provider === "posthog") {
150
162
componentResources.afterDOMLoaded.push(`
151
-
const posthogScript = document.createElement("script")
163
+
const posthogScript = document.createElement("script");
152
164
posthogScript.innerHTML= \`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
153
165
posthog.init('${cfg.analytics.apiKey}', {
154
166
api_host: '${cfg.analytics.host ?? "https://app.posthog.com"}',
155
167
capture_pageview: false,
156
168
})\`
157
-
document.head.appendChild(posthogScript)
169
+
posthogScript.onload = () => {
170
+
posthog.capture('$pageview', { path: location.pathname });
171
+
172
+
document.addEventListener('nav', () => {
173
+
posthog.capture('$pageview', { path: location.pathname });
174
+
});
175
+
};
158
176
159
-
document.addEventListener("nav", () => {
160
-
posthog.capture('$pageview', { path: location.pathname })
161
-
})
177
+
document.head.appendChild(posthogScript);
162
178
`)
163
179
} else if (cfg.analytics?.provider === "tinylytics") {
164
180
const siteId = cfg.analytics.siteId
165
181
componentResources.afterDOMLoaded.push(`
166
-
const tinylyticsScript = document.createElement("script")
167
-
tinylyticsScript.src = "https://tinylytics.app/embed/${siteId}.js?spa"
168
-
tinylyticsScript.defer = true
169
-
document.head.appendChild(tinylyticsScript)
170
-
171
-
document.addEventListener("nav", () => {
172
-
window.tinylytics.triggerUpdate()
173
-
})
182
+
const tinylyticsScript = document.createElement('script');
183
+
tinylyticsScript.src = 'https://tinylytics.app/embed/${siteId}.js?spa';
184
+
tinylyticsScript.defer = true;
185
+
tinylyticsScript.onload = () => {
186
+
window.tinylytics.triggerUpdate();
187
+
document.addEventListener('nav', () => {
188
+
window.tinylytics.triggerUpdate();
189
+
});
190
+
};
191
+
192
+
document.head.appendChild(tinylyticsScript);
174
193
`)
175
194
} else if (cfg.analytics?.provider === "cabin") {
176
195
componentResources.afterDOMLoaded.push(`