#Declare global types
15 messages · Page 1 of 1 (latest)
Hi @crimson elk. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can add a type to the global window object in src/env.d.ts by extending the Window interface.
Example (TypeScript):
// src/env.d.ts
interface Window {
gtag_report_conversion?: (...args: unknown[]) => void;
}
- Use a more specific signature if you know the params/return type, e.g.
() => boolean. - This pattern is the same used to extend Window for other globals in Astro docs. [Extending window; Alpine intellisense]
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@crimson elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@crisp rover This is the definition:
window.gtag_report_conversion = function gtag_report_conversion(url) {
var callback = function () {
if (typeof url != "undefined") {
window.location = url;
}
};
window.gtag("event", "conversion", {
send_to: "AW-337054867/2-5ECNbFzJkbEJOZ3KAB",
event_callback: callback,
});
return false;
};
Let me check the knowledge base for you again. One moment! :books:
You can type that global in src/env.d.ts by extending Window. Example:
// src/env.d.ts
interface Window {
gtag_report_conversion?: (url?: string) => boolean;
gtag?: (command: string, eventName: string, params: Record<string, unknown>) => void;
}
This follows Astro’s guidance for extending window/globalThis via ambient declarations in env.d.ts. [Extending window]
If you’re using an integration that adds globals (pattern similar to Alpine), you also declare them in env.d.ts. [Alpine intellisense]
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@crimson elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@crisp rover What does this config do, and it's correct?
{
config: {
forward: ['dataLayer.push'],
},
}
Let me check the knowledge base for you again. One moment! :books:
That’s a Partytown integration config. It forwards calls to dataLayer.push from the main window to the web worker where third‑party scripts run, so scripts in the worker can still receive those events despite not having direct access to window. [config.forward]
Yes, that shape is correct when used inside partytown({ config: { … } }) in your astro.config.mjs:
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';
export default defineConfig({
integrations: [
partytown({
config: {
forward: ['dataLayer.push'],
},
}),
],
});
[Partytown config; config.forward]
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
@crimson elk Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@crisp rover And what happens if I add gtag to the forward too?
Let me check the knowledge base for you again. One moment! :books:
If you add "gtag" to forward (e.g., forward: ['dataLayer.push', 'gtag']), Partytown will patch window.gtag on the main thread and forward those calls into the worker so the analytics script running in the worker receives them. This lets you keep calling gtag(...) from your app code while the third‑party script executes off the main thread. [config.forward]
Example config:
import { defineConfig } from 'astro/config';
import partytown from '@astrojs/partytown';
export default defineConfig({
integrations: [
partytown({
config: {
forward: ['dataLayer.push', 'gtag'],
},
}),
],
});