Merge pull request #231 from reuters-graphics/mf-analytics

Cleans up Analytics

src/components/Analytics/Analytics.mdx

@@ -6,7 +6,7 @@ import * as AnalyticsStories from './Analytics.stories.svelte';
 
 # Analytics
 
-Add Google and Chartbeat analytics to your page.
+The `Analytics` component adds Google and Chartbeat analytics to your page.
 
 ```svelte
 <script>
@@ -42,7 +42,7 @@ For example, the following excludes analytics from pages in development or hoste
 
 If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
 
-This component also exports a function you can call to register pageviews.
+This component exports a function you can call to register pageviews.
 
 For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
 

src/components/Analytics/Analytics.stories.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-  import { defineMeta, type Args } from '@storybook/addon-svelte-csf';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Analytics from './Analytics.svelte';
 
   const { Story } = defineMeta({
@@ -8,15 +8,10 @@
   });
 </script>
 
-{#snippet template(args: Args<typeof Story>)}
-  <Analytics {...args} />
-  <div>Nothing to see here</div>
-{/snippet}
-
 <Story
   name="Demo"
+  tags={['!autodocs', '!dev']}
   args={{
     authors: [{ name: 'Jane Doe' }, { name: 'John Doe' }],
   }}
-  children={template}
 />

src/components/Analytics/Analytics.svelte

@@ -1,3 +1,5 @@
+<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
+
 <script module>
   import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
   import { registerPageview as registerGAPageview } from './providers/ga';
@@ -13,7 +15,6 @@
   export { registerPageview };
 </script>
 
-<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
 <script lang="ts">
   interface Author {
     name: string;

src/components/Analytics/stories/docs/component.md

@@ -1,11 +0,0 @@
-Add Google and Chartbeat analytics to your page.
-
-```svelte
-<script>
-  import { Analytics } from '@reuters-graphics/graphics-components';
-
-  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
-</script>
-
-<Analytics authors="{authors}" />
-```

src/components/Analytics/stories/docs/environments.md

@@ -1,17 +0,0 @@
-Generally, you only want to send page analytics in production environments.
-
-In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
-
-For example, the following excludes analytics from pages in development or hosted on our preview server:
-
-```svelte
-<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}
-```

src/components/Analytics/stories/docs/multipage.md

@@ -1,31 +0,0 @@
-If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
-
-This component also exports a function you can call to register pageviews.
-
-For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
-
-```svelte
-<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 />
-```