improves Google Tag Manager implementation
This commit is contained in:
parent
173999644f
commit
6cf47dc7ee
2 changed files with 33 additions and 22 deletions
|
|
@ -1,10 +1,5 @@
|
||||||
<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
|
<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
|
||||||
|
|
||||||
<script module>
|
<script module>
|
||||||
// GTM configuration
|
|
||||||
const GTM_ID = 'GTM-P9TTSWG2';
|
|
||||||
const GTM_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}');`;
|
|
||||||
|
|
||||||
import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
|
import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
|
||||||
import { registerPageview as registerGAPageview } from './providers/ga';
|
import { registerPageview as registerGAPageview } from './providers/ga';
|
||||||
|
|
||||||
|
|
@ -24,6 +19,8 @@
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { ga, chartbeat } from './providers';
|
import { ga, chartbeat } from './providers';
|
||||||
|
import GoogleTagManager from './GTM.svelte';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
/**
|
/**
|
||||||
* Used to associate a page with its author(s) in Chartbeat.
|
* Used to associate a page with its author(s) in Chartbeat.
|
||||||
|
|
@ -39,20 +36,4 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<GoogleTagManager />
|
||||||
<!-- Google Tag Manager -->
|
|
||||||
{@html `<${'script'}>${GTM_SCRIPT}</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"
|
|
||||||
title=""
|
|
||||||
></iframe>
|
|
||||||
</noscript>
|
|
||||||
<!-- End Google Tag Manager (noscript) -->
|
|
||||||
|
|
|
||||||
30
src/components/Analytics/GTM.svelte
Normal file
30
src/components/Analytics/GTM.svelte
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
<script lang="ts">
|
||||||
|
const GTM_ID = 'GTM-P9TTSWG2';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<!-- Google Tag Manager -->
|
||||||
|
<link href="https://www.googletagmanager.com" rel="preconnect" />
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
window.dataLayer.push({
|
||||||
|
'gtm.start': new Date().getTime(),
|
||||||
|
event: 'gtm.js',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script async src={`https://www.googletagmanager.com/gtm.js?id=${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"
|
||||||
|
title=""
|
||||||
|
></iframe>
|
||||||
|
</noscript>
|
||||||
|
<!-- End Google Tag Manager (noscript) -->
|
||||||
Loading…
Reference in a new issue