あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション
7412 ワード
このチュートリアルでは、Google Analyticsを次のように統合する方法を示します.jsアプリ.実装は簡単で、サードパーティライブラリの使用を必要としません.
約5分で行う必要がありますどのように甘いはい😊? , それでは始めましょう.
始める
次.JSプロジェクト Google Analyticsアカウント あなたがGoogle Analyticsアカウントを持っていない場合Analytics , アカウントを作成し、その下にプロパティを作成する必要があります.
ステップ1：Google AnalyticsのIDを追加します。ENV環境変数ローカルファイル。JSファイルを持っていない場合は、フォルダのルートに作成します。
約5分で行う必要がありますどのように甘いはい😊? , それでは始めましょう.
始める
このチュートリアルでは、次の必要があります
ステップ1：Google AnalyticsのIDを追加します。ENV環境変数ローカルファイル。JSファイルを持っていない場合は、フォルダのルートに作成します。
Check your .gitignore file to make sure you don't accidentally commit this file..env.local should be included by default in your Next.js project, but double-check.
//inside your .env or .env.local file
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-BCEKVF1M5K
ステップ2：Google Analyticsの監視コードをあなたの次に注入する必要があります。JSアプリケーション.
Google Analyticsのアカウント/ダッシュボードから必要なGoogle Analyticsコードを抽出します
次へ。jsアプリ
現在、あなたはそれの間で必要なファイルにそれを挿入します<Head></Head> タグ
//For the Next.js app
//Locate your _document.js file under Pages folder and paste this script
import Document, { Html, Head, Main, NextScript } from 'next/document';
class CustomDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en-US">
<Head>
//start of required script/google monitoring analytics code
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`,
}}
/>
// End of required script
</Head>
<body>
<Main />
<NextScript />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BCEXXXXM5K"></script>
</body>
</Html>
);
}
}
export default CustomDocument;
そして😁, 私たちは完了です!あなたは数分でダッシュボードにあなたのメトリクスを見始める必要があります.
しかし、私はy ' all thoのためにラマダンパッケージを持っています、あなたはそれが何であるかについてわかっていたいです?😊😊
だから場合にもログ/トラックPageViewやイベントのようなものにしたいですか?
これについては
ボーナスステップ：PageViewとイベントカスタムメソッドを使用して追跡することができます。
Google Analytics追跡部に行きましょう.あなたは、ページの訪問を記録する必要があります必要に応じて、特定のイベントを正確にあなたのユーザーの行動を追跡するためにあなたのアプリケーションでトリガされます.
これを実現するために、Google Analytics用のGAフォルダと同様にサードパーティライブラリに関連するすべてのコードを配置するlibフォルダを作成することを推奨します.
インデックスを作成します.つの機能を使用してlib/GAフォルダ内のJSファイル:1つのページのビューと他のログイベントを追跡します.
//inside lib/ga/index.js
// log the pageview with their URL
export const pageview = (url) => {
window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
page_path: url,
})
}
// log specific events happening.
export const event = ({ action, params }) => {
window.gtag('event', action, params)
}
ボーナスステップ2：次のログのPageView。jsアプリ
ルータへの購読とRouteChangeCompleteイベントのリスニングは、次のログページビューへの最も簡単なアプローチです.プロジェクト.
これを行うには、あなたのアプリを開きます.JSファイルは、新しいルータイベントをチェックするためにuseeffect関数を利用します.多くの異なる種類のイベントがありますが、この記事では、ユーザーが正常に新しいページに移動するときに注意します.
Note: If you're interested, Next.js has a lot of other types of router events. You might be interested in logging in when an error happens, for example (routeChangeError).
私
mport { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as ga from '../lib/ga'
function MyApp({ Component, pageProps }) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
ga.pageview(url)
}
//When the component is mounted, subscribe to router changes
//and log those page views
router.events.on('routeChangeComplete', handleRouteChange)
// If the component is unmounted, unsubscribe
// from the event with the `off` method
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return <Component {...pageProps} />
}
export default MyApp
ボーナスステップ3：あなたもあなたの次の特定のイベントをログに記録することがあります。jsアプリ
現在のページビューが追跡されている場合、アプリケーションの特定のイベントをログに記録することに興味があります.Google Analyticsのデフォルトイベントのリストはここで見つかります.
これは、ユーザが入力した検索条件を追跡する方法の例です.
import { useState } from 'react'
import * as ga from '../lib/ga'
export default function Home() {
const [query, setQuery] = useState("");
const search = () => {
ga.event({
action: "search",
params : {
search_term: query
}
})
}
return (
<div>
<div>
<input type="text" onChange={(event) => setQuery(event.target.value)}></input>
</div>
<div>
<button onClick={() => search()}>Search</button>
</div>
</div>
)
}
Don't forget to include your Google Analytics secret key to your environment variables once you've deployed to production.
Google Analyticsが接続されていることを確認するには
それは、Google Analyticsで現れるデータのために、24 - 48時間の間をとります.しかし、あなたのタグをリアルタイムのビューを見て作業しているかどうかを確認することができます
私の心の中で見たものを見るために、探索メトリクスのセクションをクリックしてください私はahhhのようだった🥵 グーグル!p・P・P・M・ノー😂, とても甘いので、ビジネスは確かにこれでスケールします.
最後に、Google Analyticsのデバッガでページビューとイベントをテストしデバッグする
あなたがリアルタイムで任意のデータを参照していない場合は、クロムアドオンを使用することができますGoogle Analytics Debugger あなたのGoogle Analyticsタグをテストするには.
それはあなたのコンソールにインストールされ、スイッチをオンにすると、簡単にシーンの背後に何が起こって表示するには、Google Analyticsのメッセージを印刷します.
これで次がある.Google Analyticsを使用して追跡する準備ができているJSアプリケーション.
フォローミー🏄 🏄 🏄 またはあなたがこのエッセイを楽しんだなら.
Reference
この問題について(あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション), 我々は、より多くの情報をここで見つけました
https://dev.to/muazu/add-google-analytics-to-your-nextjs-application-in-5mins-269f
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Check your .gitignore file to make sure you don't accidentally commit this file..env.local should be included by default in your Next.js project, but double-check.
//inside your .env or .env.local file
NEXT_PUBLIC_GOOGLE_ANALYTICS=G-BCEKVF1M5K
Google Analyticsのアカウント/ダッシュボードから必要なGoogle Analyticsコードを抽出します
次へ。jsアプリ
現在、あなたはそれの間で必要なファイルにそれを挿入します
<Head></Head> タグ//For the Next.js app
//Locate your _document.js file under Pages folder and paste this script
import Document, { Html, Head, Main, NextScript } from 'next/document';
class CustomDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en-US">
<Head>
//start of required script/google monitoring analytics code
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`,
}}
/>
// End of required script
</Head>
<body>
<Main />
<NextScript />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BCEXXXXM5K"></script>
</body>
</Html>
);
}
}
export default CustomDocument;
しかし、私はy ' all thoのためにラマダンパッケージを持っています、あなたはそれが何であるかについてわかっていたいです?😊😊
だから場合にもログ/トラックPageViewやイベントのようなものにしたいですか?
これについては
ボーナスステップ：PageViewとイベントカスタムメソッドを使用して追跡することができます。
Google Analytics追跡部に行きましょう.あなたは、ページの訪問を記録する必要があります必要に応じて、特定のイベントを正確にあなたのユーザーの行動を追跡するためにあなたのアプリケーションでトリガされます.
これを実現するために、Google Analytics用のGAフォルダと同様にサードパーティライブラリに関連するすべてのコードを配置するlibフォルダを作成することを推奨します.
インデックスを作成します.つの機能を使用してlib/GAフォルダ内のJSファイル:1つのページのビューと他のログイベントを追跡します.
//inside lib/ga/index.js
// log the pageview with their URL
export const pageview = (url) => {
window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
page_path: url,
})
}
// log specific events happening.
export const event = ({ action, params }) => {
window.gtag('event', action, params)
}
ボーナスステップ2：次のログのPageView。jsアプリ
ルータへの購読とRouteChangeCompleteイベントのリスニングは、次のログページビューへの最も簡単なアプローチです.プロジェクト.
これを行うには、あなたのアプリを開きます.JSファイルは、新しいルータイベントをチェックするためにuseeffect関数を利用します.多くの異なる種類のイベントがありますが、この記事では、ユーザーが正常に新しいページに移動するときに注意します.
Note: If you're interested, Next.js has a lot of other types of router events. You might be interested in logging in when an error happens, for example (routeChangeError).
私
mport { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as ga from '../lib/ga'
function MyApp({ Component, pageProps }) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
ga.pageview(url)
}
//When the component is mounted, subscribe to router changes
//and log those page views
router.events.on('routeChangeComplete', handleRouteChange)
// If the component is unmounted, unsubscribe
// from the event with the `off` method
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return <Component {...pageProps} />
}
export default MyApp
ボーナスステップ3：あなたもあなたの次の特定のイベントをログに記録することがあります。jsアプリ
現在のページビューが追跡されている場合、アプリケーションの特定のイベントをログに記録することに興味があります.Google Analyticsのデフォルトイベントのリストはここで見つかります.
これは、ユーザが入力した検索条件を追跡する方法の例です.
import { useState } from 'react'
import * as ga from '../lib/ga'
export default function Home() {
const [query, setQuery] = useState("");
const search = () => {
ga.event({
action: "search",
params : {
search_term: query
}
})
}
return (
<div>
<div>
<input type="text" onChange={(event) => setQuery(event.target.value)}></input>
</div>
<div>
<button onClick={() => search()}>Search</button>
</div>
</div>
)
}
Don't forget to include your Google Analytics secret key to your environment variables once you've deployed to production.
Google Analyticsが接続されていることを確認するには
それは、Google Analyticsで現れるデータのために、24 - 48時間の間をとります.しかし、あなたのタグをリアルタイムのビューを見て作業しているかどうかを確認することができます
私の心の中で見たものを見るために、探索メトリクスのセクションをクリックしてください私はahhhのようだった🥵 グーグル!p・P・P・M・ノー😂, とても甘いので、ビジネスは確かにこれでスケールします.
最後に、Google Analyticsのデバッガでページビューとイベントをテストしデバッグする
あなたがリアルタイムで任意のデータを参照していない場合は、クロムアドオンを使用することができますGoogle Analytics Debugger あなたのGoogle Analyticsタグをテストするには.
それはあなたのコンソールにインストールされ、スイッチをオンにすると、簡単にシーンの背後に何が起こって表示するには、Google Analyticsのメッセージを印刷します.
これで次がある.Google Analyticsを使用して追跡する準備ができているJSアプリケーション.
フォローミー🏄 🏄 🏄 またはあなたがこのエッセイを楽しんだなら.
Reference
この問題について(あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション), 我々は、より多くの情報をここで見つけました
https://dev.to/muazu/add-google-analytics-to-your-nextjs-application-in-5mins-269f
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
//inside lib/ga/index.js
// log the pageview with their URL
export const pageview = (url) => {
window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
page_path: url,
})
}
// log specific events happening.
export const event = ({ action, params }) => {
window.gtag('event', action, params)
}
ルータへの購読とRouteChangeCompleteイベントのリスニングは、次のログページビューへの最も簡単なアプローチです.プロジェクト.
これを行うには、あなたのアプリを開きます.JSファイルは、新しいルータイベントをチェックするためにuseeffect関数を利用します.多くの異なる種類のイベントがありますが、この記事では、ユーザーが正常に新しいページに移動するときに注意します.
Note: If you're interested, Next.js has a lot of other types of router events. You might be interested in logging in when an error happens, for example (routeChangeError).
私
mport { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as ga from '../lib/ga'
function MyApp({ Component, pageProps }) {
const router = useRouter()
useEffect(() => {
const handleRouteChange = (url) => {
ga.pageview(url)
}
//When the component is mounted, subscribe to router changes
//and log those page views
router.events.on('routeChangeComplete', handleRouteChange)
// If the component is unmounted, unsubscribe
// from the event with the `off` method
return () => {
router.events.off('routeChangeComplete', handleRouteChange)
}
}, [router.events])
return <Component {...pageProps} />
}
export default MyApp
ボーナスステップ3：あなたもあなたの次の特定のイベントをログに記録することがあります。jsアプリ
現在のページビューが追跡されている場合、アプリケーションの特定のイベントをログに記録することに興味があります.Google Analyticsのデフォルトイベントのリストはここで見つかります.
これは、ユーザが入力した検索条件を追跡する方法の例です.
import { useState } from 'react'
import * as ga from '../lib/ga'
export default function Home() {
const [query, setQuery] = useState("");
const search = () => {
ga.event({
action: "search",
params : {
search_term: query
}
})
}
return (
<div>
<div>
<input type="text" onChange={(event) => setQuery(event.target.value)}></input>
</div>
<div>
<button onClick={() => search()}>Search</button>
</div>
</div>
)
}
Don't forget to include your Google Analytics secret key to your environment variables once you've deployed to production.
Google Analyticsが接続されていることを確認するには
それは、Google Analyticsで現れるデータのために、24 - 48時間の間をとります.しかし、あなたのタグをリアルタイムのビューを見て作業しているかどうかを確認することができます
私の心の中で見たものを見るために、探索メトリクスのセクションをクリックしてください私はahhhのようだった🥵 グーグル!p・P・P・M・ノー😂, とても甘いので、ビジネスは確かにこれでスケールします.
最後に、Google Analyticsのデバッガでページビューとイベントをテストしデバッグする
あなたがリアルタイムで任意のデータを参照していない場合は、クロムアドオンを使用することができますGoogle Analytics Debugger あなたのGoogle Analyticsタグをテストするには.
それはあなたのコンソールにインストールされ、スイッチをオンにすると、簡単にシーンの背後に何が起こって表示するには、Google Analyticsのメッセージを印刷します.
これで次がある.Google Analyticsを使用して追跡する準備ができているJSアプリケーション.
フォローミー🏄 🏄 🏄 またはあなたがこのエッセイを楽しんだなら.
Reference
この問題について(あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション), 我々は、より多くの情報をここで見つけました
https://dev.to/muazu/add-google-analytics-to-your-nextjs-application-in-5mins-269f
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
import { useState } from 'react'
import * as ga from '../lib/ga'
export default function Home() {
const [query, setQuery] = useState("");
const search = () => {
ga.event({
action: "search",
params : {
search_term: query
}
})
}
return (
<div>
<div>
<input type="text" onChange={(event) => setQuery(event.target.value)}></input>
</div>
<div>
<button onClick={() => search()}>Search</button>
</div>
</div>
)
}
Don't forget to include your Google Analytics secret key to your environment variables once you've deployed to production.
それは、Google Analyticsで現れるデータのために、24 - 48時間の間をとります.しかし、あなたのタグをリアルタイムのビューを見て作業しているかどうかを確認することができます
私の心の中で見たものを見るために、探索メトリクスのセクションをクリックしてください私はahhhのようだった🥵 グーグル!p・P・P・M・ノー😂, とても甘いので、ビジネスは確かにこれでスケールします.
最後に、Google Analyticsのデバッガでページビューとイベントをテストしデバッグする
あなたがリアルタイムで任意のデータを参照していない場合は、クロムアドオンを使用することができますGoogle Analytics Debugger あなたのGoogle Analyticsタグをテストするには.
それはあなたのコンソールにインストールされ、スイッチをオンにすると、簡単にシーンの背後に何が起こって表示するには、Google Analyticsのメッセージを印刷します.
これで次がある.Google Analyticsを使用して追跡する準備ができているJSアプリケーション.
フォローミー🏄 🏄 🏄 またはあなたがこのエッセイを楽しんだなら.
Reference
この問題について(あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション), 我々は、より多くの情報をここで見つけました
https://dev.to/muazu/add-google-analytics-to-your-nextjs-application-in-5mins-269f
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について(あなたの次にGoogle Analyticsを加えてください.5分でのJSアプリケーション), 我々は、より多くの情報をここで見つけました https://dev.to/muazu/add-google-analytics-to-your-nextjs-application-in-5mins-269fテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol