ניתוח נתונים הוא חובה אם אתה רוצה לעקוב אחר מספר המבקרים שהאתר שלך מקבל. ישנן דרכים שונות שבהן תוכל להוסיף ניתוחים לפרויקט שלך, כולל Google Analytics. זהו שירות חינמי ופשוט יחסית להגדרה.
למד כיצד להוסיף את Google Analytics לאתר שלך באמצעות Next.js, מסגרת React לבניית אתרים ידידותיים לקידום אתרים.
הגדרת גוגל אנליטיקס
גוגל אנליטיקס מספק תובנות להתנהגות של אנשים המבקרים באתר שלך. זה אומר לך אילו דפים מקבלים את מספר הצפיות ומספק לך נתוני קהל כמו מיקום, גיל, עניין והמכשיר שבו הם משתמשים. נתונים אלה יכולים לעזור בקבלת החלטות לגבי הכיוון שהעסק שלך צריך לקחת כדי להצליח.
כדי להתחיל, בקר ב- לוח מחוונים לניתוח וצור חשבון חדש על ידי ביצוע השלבים הבאים:
- לחץ על צור חשבון לחצן בכרטיסיית הניהול כדי ליצור חשבון חדש.
- הוסף שם חשבון בקטע הגדרת חשבון.
- צור את מאפיין הניתוח על ידי מתן שם.
- הוסף את פרטי העסק. בחר את האפשרויות החלות על האתר שלך.
- לחץ על לִיצוֹר לחצן כדי לסיים את הגדרת הנכס.
- לחץ על זרם האינטרנט כדי לציין את זרם הנתונים ש-Google Analytics צריך לעקוב.
- ציין את כתובת האתר שלך ותן לזרם הנתונים שם.
- לחץ על הוראות תיוג וקבל את הסקריפט שבו תשתמש באתר שלך.
- העתק את מזהה המדידה (קוד המעקב) לשימוש מאוחר יותר.
לאחר שתקבל את קוד המעקב, תוכל להגדיר את פרויקט Next.js.
הגדרת פרויקט Next.js
אם עדיין לא הגדרת פרוייקט Next.js, עיין ב- המדריך הרשמי של Next.js להתחיל.
כשיצרת את מאפיין תג האתר הגלובלי, קיבלת סקריפט כזה:
<!-- תג גוגל (gtag.js) -->
<script אסינכרון src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<תַסרִיט>
חַלוֹן.dataLayer = חַלוֹן.dataLayer || [];
פוּנקצִיָהgtag(){dataLayer.push(טיעונים);}
gtag('js', חָדָשׁתַאֲרִיך());
gtag('תצורה', 'G-NHVWK8L97D');
</script>
אתה צריך להוסיף את הסקריפט הזה לתג head של האתר שלך. ב-Next.js, אתה משתמש ברכיב הסקריפט מ-next/script. רכיב זה הוא הרחבה של תג הסקריפט HTML. זה מאפשר לך לכלול סקריפטים של צד שלישי לאתר Next.js שלך ולהגדיר את אסטרטגיית הטעינה שלהם, ולשפר את הביצועים.
ה Next.js Script הרכיב מציע אסטרטגיות טעינה שונות. האסטרטגיה "אחרי אינטראקטיבית" מתאימה לתסריט אנליטי. זה אומר שהוא ייטען לאחר שהדף יהיה אינטראקטיבי.
יְבוּא תַסרִיט מ "הבא/תסריט"
<סקריפט src="" אסטרטגיה="לאחר אינטראקטיב" />
פתח את ה pages/_app.js קובץ וייבא את רכיב הסקריפט בחלק העליון.
יְבוּא תַסרִיט מ 'הבא/תסריט'
לאחר מכן, שנה את הצהרת ההחזרה של רכיב האפליקציה כך שתכלול את תג הסקריפט מ-Google Analytics.
יְבוּא '../styles/globals.css'
יְבוּא מַעֲרָך מ '../components/Layout/Layout'
יְבוּא תַסרִיט מ 'הבא/תסריט'פוּנקצִיָהMyApp({ Component, pageProps }) {
לַחֲזוֹר (
<>
<אסטרטגיית סקריפט="לאחר אינטראקטיב" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<תַסרִיט
id='גוגל ניתוח נתונים'
אסטרטגיה="לאחר אינטראקטיב"
dangerouslySetInnerHTML={{
__html: `
חַלוֹן.dataLayer = חַלוֹן.dataLayer || [];
פוּנקצִיָהgtag(){dataLayer.push(טיעונים);}
gtag('js', חָדָשׁתַאֲרִיך());
gtag('תצורה', 'G-XXXXXXX', {
page_path: חַלוֹן.מקום.pathname,
});
`,
}}
/>
<מַעֲרָך>
<רכיב {...pageProps} />
</Layout>
</>
)
}
יְצוּאבְּרִירַת מֶחדָל MyApp
שימו לב שתג זה שונה במקצת מזה שגוגל אנליטיקס מספק. הוא משתמש ב-SetInnerHTML מסוכן וכולל אסטרטגיית טעינה. עם זאת, הם עובדים אותו הדבר.
זכור להחליף את G-XXXXXXX בקוד המעקב שלך. כמו כן, רצוי לאחסן את קוד המעקב בקובץ .env כדי לשמור אותו בסוד.
הוספת גוגל אנליטיקס ליישום דף בודד
אתה יכול להשתמש בתג הסקריפט שלמעלה עבור אתר רגיל ולהשאיר אותו כך. עם זאת, עבור יישום בעל עמוד בודד כמו אתר Next.js, עליך לנקוט בכמה צעדים נוספים.
א יישום של עמוד אחד (SPA) הוא אתר שטוען את כל התוכן מראש, בתגובה לבקשה ראשונית. הדפדפן טוען תוכן באופן דינמי כאשר משתמש לוחץ על קישורים כדי לנווט באתר. זה לא מבצע בקשת דף, רק כתובת האתר משתנה.
זה שונה עבור דפי Next.js המשתמשים ב-getServerSideProps מכיוון שהדפדפן מעבד אותם לפי בקשה.
תג Google פועל על ידי הקלטת תצוגת דף כאשר דף חדש נטען. לכן, עבור SPAs, תג Google מבוצע רק פעם אחת, כאשר הדף נטען בתחילה. לכן, עליך להקליט באופן ידני את התצוגות כאשר המשתמש מנווט לדפים שונים.
ראה את המדידה של עמוד בודד מדריך גוגל אנליטיקס ללמוד 'יותר.
כדי להקליט באופן ידני תצוגות עמוד ב-Next.js באמצעות סקריפט gtag, צור תיקייה חדשה בשםlib ולהוסיף קובץ חדש, gtag.js.
יְצוּאconst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;יְצוּאconst תצוגת דף = () => {
window.gtag("תצורה", GA_MEASUREMENT_ID, {
page_path: url,
});
};
יְצוּאconst event = ({ action, category, label, value }) => {
window.gtag("מִקרֶה", פעולה, {
event_category: קטגוריה,
תווית_אירוע: תווית,
ערך,
});
};
לאחר מכן, שנה את /pages/_app.js כדי להשתמש בפונקציות הללו ולעקוב אחר צפיות בעמודים ב-useEffect hook.
יְבוּא '../styles/globals.css'
יְבוּא מַעֲרָך מ '../components/Layout/Layout'
יְבוּא תַסרִיט מ 'הבא/תסריט'
יְבוּא { useRouter } מ 'הבא/נתב';
יְבוּא { useEffect } מ "לְהָגִיב";
יְבוּא * כפי ש gtag מ "../lib/gtag"פוּנקצִיָהMyApp({ Component, pageProps }: AppProps) {
const נתב = useRouter();useEffect(() => {
const handleRouteChange = (כתובת אתר) => {
gtag.pageview(כתובת אתר);
};router.events.on("מסלולChangeComplete", handleRouteChange);
לַחֲזוֹר () => {
router.events.off("מסלולChangeComplete", handleRouteChange);
};
}, [router.events]);
לַחֲזוֹר (
<>
<אסטרטגיית סקריפט="לאחר אינטראקטיב" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<תַסרִיט
id='גוגל ניתוח נתונים'
אסטרטגיה="לאחר אינטראקטיב"
dangerouslySetInnerHTML={{
__html: `
חַלוֹן.dataLayer = חַלוֹן.dataLayer || [];
פוּנקצִיָהgtag(){dataLayer.push(טיעונים);}
gtag('js', חָדָשׁתַאֲרִיך());
gtag('תצורה', 'G-XXXXXX', {
page_path: חַלוֹן.מקום.pathname,
});
`,
}}
/>
<מַעֲרָך>
<רכיב {...pageProps} />
</Layout>
</>
)
}
יְצוּאבְּרִירַת מֶחדָל MyApp
דוגמה זו משתמשת ב-useRouter ו-useEffect hooks כדי להקליט תצוגת עמוד בכל פעם שהמשתמש מנווט לדף אחר.
קרא לשיטת useRouter מ-Next/Router והקצה אותה למשתנה הנתב. ב-useEffect hook, האזן לאירוע routeChangeComplete בנתב. כאשר האירוע מופעל, הקלט תצוגת עמוד על ידי קריאה לפונקציה handleRouteChange.
הצהרת החזרה של useEffect hook מבטלת את הרישום לאירוע routeChangeComplete בשיטת 'off'.
השתמש ב-Google Analytics כדי לאסוף נתוני משתמשים
נתונים מועילים מאוד לקבלת החלטות טובות, והוספת Google Analytics לאתר שלך היא אחת הדרכים לאסוף אותם.
אתה יכול להוסיף את Google Analytics לפרויקט Next.js באמצעות הוקס כדי להבטיח שאתה מתעד את כל צפיות הדף גם כאשר דף משתמש בניתוב בצד הלקוח. עכשיו אתה יכול לראות כמה צפיות האתר שלך מקבל במרכז השליטה של Google Analytics שלך.