Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blog starter example: add @vercel/analytics/react and Analytics component by default #44922

Open
1 task done
ybyzek opened this issue Jan 16, 2023 · 0 comments
Open
1 task done
Labels
area: examples Anything inside the examples folder

Comments

@ybyzek
Copy link

ybyzek commented Jan 16, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Mon Feb 21 20:35:58 PST 2022; root:xnu-8020.101.4~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.9.0
      npm: 8.19.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.1.3-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

https://github.com/vercel/next.js/tree/canary/examples/blog-starter

What browser are you using? (if relevant)

Safari Version 15.4 (17613.1.17.1.6)

How are you deploying your application? (if relevant)

No response

Describe the Bug

Issue type: enhancement

Context: I'm standing up a blog post for the first time, and I wanted to have pageview/traffic metrics on Day 1. I started exploring Google Analytics but hit a few snags, and only afterwards discovered Vercel had the Analytics feature.

👍 The Audiences quickstart was easy to follow.

This GitHub issue is a suggestion to add it by default into the Vercel template.

diff --git a/package.json b/package.json
index d86551e..996296b 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@vercel/analytics": "^0.1.8",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",

....

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 6ac887c..d36c792 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,12 @@
 import { AppProps } from 'next/app'
 import '../styles/index.css'
+import { Analytics } from '@vercel/analytics/react';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <>
+      <Component {...pageProps} />
+      <Analytics />
+    </>
+  );
 }

Note: the feature is marked as still in Beta, not sure if that would influence whether or not this is added into the template.

Expected Behavior

No need to touch the template code to get Analytics (note: still requires enabling the feature in the dashboard)

To Reproduce

View source code, missing from: https://github.com/vercel/next.js/blob/canary/examples/blog-starter/pages/_app.tsx

@ybyzek ybyzek added the area: examples Anything inside the examples folder label Jan 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: examples Anything inside the examples folder
Projects
None yet
Development

No branches or pull requests

1 participant