53 lines
3.6 KiB
JavaScript
53 lines
3.6 KiB
JavaScript
import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as s}from"./index-Z-6k0Xrj.js";import{A as a}from"./Analytics.stories-zZWSWRWk.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./svelte-head-xbEMkVns.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";function i(t){const n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...r(),...t.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{of:a}),`
|
|
`,e.jsx(n.h1,{id:"analytics",children:"Analytics"}),`
|
|
`,e.jsxs(n.p,{children:["The ",e.jsx(n.code,{children:"Analytics"})," component adds Google and Chartbeat analytics to your page."]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { Analytics } from '@reuters-graphics/graphics-components';
|
|
|
|
const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
|
|
<\/script>
|
|
|
|
<Analytics {authors} />
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"environments",children:"Environments"}),`
|
|
`,e.jsx(n.p,{children:"Generally, you only want to send page analytics in production environments."}),`
|
|
`,e.jsxs(n.p,{children:["In a SvelteKit context, you can use ",e.jsx(n.code,{children:"$app"})," stores to restrict when you send analytics."]}),`
|
|
`,e.jsx(n.p,{children:"For example, the following excludes analytics from pages in development or hosted on our preview server:"}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import { Analytics } from '@reuters-graphics/graphics-components';
|
|
import { dev } from '$app/environment';
|
|
import { page } from '$app/stores';
|
|
<\/script>
|
|
|
|
{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
|
|
<Analytics />
|
|
{/if}
|
|
`})}),`
|
|
`,e.jsx(n.h2,{id:"multipage-apps",children:"Multipage apps"}),`
|
|
`,e.jsxs(n.p,{children:["If you're using analytics to measure a multipage newsapp that uses ",e.jsx(n.a,{href:"https://kit.svelte.dev/docs/glossary#routing",rel:"nofollow",children:"client-side routing"}),", then you may need to trigger analytics after virtual page navigation."]}),`
|
|
`,e.jsx(n.p,{children:"This component exports a function you can call to register pageviews."}),`
|
|
`,e.jsxs(n.p,{children:["For example, here's how you can use SvelteKit's ",e.jsx(n.a,{href:"https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate",rel:"nofollow",children:e.jsx(n.code,{children:"afterNavigate"})})," lifecycle to capture additional pageviews:"]}),`
|
|
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
|
|
import {
|
|
Analytics,
|
|
registerPageview,
|
|
} from '@reuters-graphics/graphics-components';
|
|
import { afterNavigate } from '$app/navigation';
|
|
|
|
let isFirstPageview = true;
|
|
|
|
afterNavigate(() => {
|
|
// We shouldn't fire on initial page load because the Analytics component
|
|
// already registers a reader's first pageview. After this component
|
|
// has initially mounted, we can be sure that further navigation is virtual
|
|
// and register pageviews using this function.
|
|
if (!isFirstPageview) {
|
|
registerPageview();
|
|
} else {
|
|
isFirstPageview = false;
|
|
}
|
|
});
|
|
<\/script>
|
|
|
|
<Analytics />
|
|
`})})]})}function $(t={}){const{wrapper:n}={...r(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(i,{...t})}):i(t)}export{$ as default};
|