ViewTransitions

[RamiJabr]

Hello,

I am working on a solution to make gtm work with Astro ViewTransitions. As far as I can see, Analytics is not correctly executed again when the page is left.

Depending on the script attributes (data-astro-rerun or is:inline) and/or additional event listener (astro:page-load or astro:after-swap) at least the external script is reloaded. However, the GA events are not triggered.

Maybe the window/document has to be cleaned in an astro:before-* event?

Is anyone interestedor has any ideas?

[laradevitt]

@RamiJabr Did you make any progress with this? I feel like I've tried everything and am at a loss.

[RamiJabr]

@laradevitt We've implemented a virtual page view that is sent programmatically.

[digi4care]

I've updated the GTM implementation to handle Astro View Transitions properly.

Here are the key changes:

1. Created a reusable initGTM() function that:

   • Pushes a page transition event to the dataLayer with timestamp
   • Removes any existing GTM script to prevent duplicates
   • Creates and adds a new GTM script with error handling

2. Added View Transitions support:

   • Listens for the astro:after-swap event which fires after page content is swapped
   • Preserves existing dataLayer data while marking new page transitions
   • Re-initializes GTM with proper error handling

This solution should now properly track page views and events during View Transitions because:

1. The dataLayer preserves existing data between transitions
2. Each transition is marked with a newPage: true flag
3. GTM script is properly reinitialized while maintaining state

To test this implementation:

1. Make sure your pages are using View Transitions
2. Add the GTM component as before
3. Navigate between pages and check the browser's developer tools:
   • Network tab should show new GTM requests
   • Console should show dataLayer events with preserved data
   • GTM Debug mode should show proper page views and transitions
   • Check for any initialization errors in the console

Please test this and let me know

[digi4care]

sorry forgot switch to Viewtransitions branch

[digi4care]

https://www.npmjs.com/package/@digi4care/astro-google-tagmanager/v/1.6.1-beta.1