wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(GTM): add GTM container with early head injection

Browse source 
- Add GTM script injection via <svelte:head> for early loading
  - Include GTM noscript iframe fallback for non-JS users
  - Configure Reuters GTM container ID (GTM-P9TTSWG2)
  - Update GA and Chartbeat providers to allow loading via GTM container
This commit is contained in:
Paul Alexandrescu 2025-07-15 22:53:06 -04:00
parent 24dbdfc09e
commit 1103a87282
Failed to extract signature
3 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/Analytics/Analytics.svelte
View file

@ -1,5 +1,10 @@
<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
<script module>
// GTM configuration
const GTM_ID = 'GTM-P9TTSWG2';
</script>
<script module>
import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
import { registerPageview as registerGAPageview } from './providers/ga';
@ -8,6 +13,7 @@
function registerPageview() {
registerChartbeatPageview();
registerGAPageview();
}
export { registerPageview };
@ -34,3 +40,24 @@
chartbeat(authors);
});
</script>
<svelte:head>
<!-- Google Tag Manager -->
{@html `<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GTM_ID}');</script>`}
<!-- End Google Tag Manager -->
</svelte:head>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id={GTM_ID}"
height="0"
width="0"
style="display:none;visibility:hidden"
></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

9
src/components/Analytics/providers/chartbeat.ts
View file

@ -5,14 +5,7 @@ const URL = '//static.chartbeat.com/js/chartbeat.js';
const attachScript = () => {
// If script is already attached, skip
if (document.querySelector(`script[src="${URL}"]`)) return;
// ... else attach it.
const e = document.createElement('script');
const n = document.getElementsByTagName('script')[0];
e.type = 'text/javascript';
e.async = true;
e.src = URL;
n.parentNode!.insertBefore(e, n);
// loaded via GTM Container
};
export default (authors: { name: string }[]) => {

9
src/components/Analytics/providers/ga.ts
View file

@ -5,14 +5,7 @@ const URL = `https://www.googletagmanager.com/gtag/js?id=${GOOGLE_TAG_ID}`;
const attachScript = () => {
// If script is already attached, skip
if (document.querySelector(`script[src="${URL}"]`)) return;
// ... else attach it.
const e = document.createElement('script');
const n = document.getElementsByTagName('script')[0];
e.type = 'text/javascript';
e.async = true;
e.src = URL;
n.parentNode!.insertBefore(e, n);
// loaded via GTM Container
};
export default () => {