خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

چگونه Google Analytics را به وب سایت Next.js اضافه کنیم

ارشیا یوسفی ادیب ۳ اردیبهشت, ۱۴۰۳ 4 min read

Google analytics یک راه حل فوق العاده است که آمار جامعی را برای وب سایت شما در اختیار شما قرار می دهد. نحوه استفاده از آن را با سایت Next.js بیابید.

اگر می خواهید تعداد بازدیدکنندگان وب سایت خود را پیگیری کنید، تجزیه و تحلیل داده ها ضروری است. روش های مختلفی وجود دارد که می توانید تجزیه و تحلیل را به پروژه خود اضافه کنید، از جمله Google Analytics. این یک سرویس رایگان است و راه اندازی آن نسبتاً ساده است.

بیاموزید که چگونه Google Analytics را با استفاده از Next.js به سایت خود اضافه کنید، یک چارچوب React برای ساخت وب سایت های دوستدار SEO.

راه اندازی گوگل آنالیتیکس

گوگل آنالیتیکس اطلاعاتی در مورد رفتار افرادی که از وب سایت شما بازدید می کنند ارائه می دهد. به شما می‌گوید کدام صفحات تعداد بازدیدها را دارند و داده‌هایی مانند مکان، سن، علاقه و دستگاه مورد استفاده مخاطبان را در اختیار شما قرار می‌دهد. این داده ها می تواند به تصمیم گیری در مورد مسیری که کسب و کار شما باید برای موفقیت در پیش بگیرد کمک کند.

برای شروع، از داشبورد تجزیه و تحلیل بازدید کنید و با دنبال کردن این مراحل یک حساب کاربری جدید ایجاد کنید:

  1. برای ایجاد یک حساب کاربری جدید، روی دکمه Create Account در تب admin کلیک کنید.
  2. در قسمت Account setup یک نام حساب اضافه کنید.
  3. ویژگی تجزیه و تحلیل را با ارائه یک نام ایجاد کنید.
  4. جزئیات کسب و کار را اضافه کنید گزینه های مربوط به وب سایت شما را انتخاب کنید.
  5. روی دکمه Create کلیک کنید تا تنظیمات ملک تمام شود.
  6. برای مشخص کردن جریان داده ای که Google Analytics باید ردیابی کند، روی جریان وب کلیک کنید.
  7. آدرس وب سایت خود را مشخص کنید و به جریان داده یک نام بدهید.
  8. روی دستورالعمل های برچسب گذاری کلیک کنید و اسکریپتی را که در وب سایت خود استفاده خواهید کرد، دریافت کنید.
  9. شناسه اندازه گیری (کد رهگیری) را کپی کنید تا بعدا استفاده کنید.

دستورالعمل های برچسب گذاریاندازه گیری تجزیه و تحلیل گوگل

پس از دریافت کد رهگیری، می توانید پروژه Next.js را راه اندازی کنید.

مطلب مرتبط:   9 بهترین بازی کدنویسی برای تقویت مهارت های برنامه نویسی شما

راه اندازی پروژه Next.js

اگر قبلاً پروژه Next.js را راه‌اندازی نکرده‌اید، برای شروع به راهنمای رسمی Next.js مراجعه کنید.

هنگامی که ویژگی تگ سایت جهانی را ایجاد کردید، اسکریپتی مانند زیر دریافت می کنید:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-NHVWK8L97D');
</script>

شما باید این اسکریپت را به تگ head وب سایت خود اضافه کنید. در Next.js، از مولفه Script از next/script استفاده می کنید. این جزء پسوند تگ اسکریپت HTML است. این به شما امکان می دهد اسکریپت های شخص ثالث را در وب سایت Next.js خود قرار دهید و استراتژی بارگذاری آنها را تنظیم کنید و عملکرد را بهبود بخشید.

مؤلفه Next.js Script استراتژی های بارگیری مختلفی را ارائه می دهد. استراتژی “پس از تعامل” برای یک اسکریپت تحلیلی مناسب است. این بدان معنی است که پس از تعامل صفحه بارگیری می شود.

import Script from "next/script"
<Script src="" strategy="afterInteractive" />

فایل pages/_app.js را باز کنید و مولفه Script را در بالا وارد کنید.

import Script from 'next/script'

در مرحله بعد، بیانیه بازگشت مؤلفه App را طوری تغییر دهید که تگ اسکریپت از Google Analytics را در بر گیرد.

import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
 
function MyApp({ Component, pageProps }) {
  return (
    <>
    <Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"/>
    <Script
      id='google-analytics'
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXX', {
            page_path: window.location.pathname,
          });
        `,
        }}
    />
    <Layout>
      <Component {...pageProps} />
    </Layout>
    </>
  )
}
 
export default MyApp

توجه داشته باشید که این تگ با آنچه گوگل آنالیتیکس ارائه می دهد کمی متفاوت است. از SetInnerHTML خطرناک استفاده می کند و شامل یک استراتژی بارگذاری می شود. با این حال آنها یکسان کار می کنند.

مطلب مرتبط:   چه چیزی در Angular v16 جدید است؟

به یاد داشته باشید که کد رهگیری خود را جایگزین G-XXXXXXX کنید. همچنین توصیه می شود کد رهگیری را در یک فایل env. ذخیره کنید تا مخفی بماند.

افزودن گوگل آنالیتیکس به اپلیکیشن تک صفحه ای

می‌توانید از تگ اسکریپت بالا برای یک وب‌سایت معمولی استفاده کنید و آن را رها کنید. با این حال، برای یک برنامه تک صفحه ای مانند وب سایت Next.js، باید چند مرحله اضافی را انجام دهید.

اپلیکیشن تک صفحه ای (SPA) وب سایتی است که در پاسخ به درخواست اولیه، تمام محتوا را از قبل بارگیری می کند. مرورگر محتوا را به صورت پویا بارگیری می کند، زیرا کاربر روی پیوندها برای حرکت در سایت کلیک می کند. درخواست صفحه نمی کند، فقط URL تغییر می کند.

این برای صفحات Next.js که از getServerSideProps استفاده می‌کنند متفاوت است زیرا مرورگر آن‌ها را بر اساس درخواست ارائه می‌کند.

تگ Google با ضبط نمای صفحه هنگام بارگیری صفحه جدید کار می کند. بنابراین، برای SPA ها، تگ گوگل تنها یک بار، زمانی که صفحه در ابتدا بارگیری می شود، اجرا می شود. بنابراین، هنگام حرکت کاربر به صفحات مختلف، باید نماها را به صورت دستی ثبت کنید.

برای کسب اطلاعات بیشتر، راهنمای اندازه‌گیری تک صفحه‌ای Google Analytics را ببینید.

برای ضبط دستی نماهای صفحه در Next.js با استفاده از اسکریپت gtag، یک پوشه جدید به نام lib ایجاد کنید و یک فایل جدید به نام gtag.js اضافه کنید.

export const GA_MEASUREMENT_ID = process.env.GA_MEASUREMENT_ID;
 
export const pageview = () => {
  window.gtag("config", GA_MEASUREMENT_ID, {
    page_path: url,
  });
};
 
export const event = ({ action, category, label, value }) => {
  window.gtag("event", action, {
    event_category: category,
    event_label: label,
    value,
  });
};

سپس، /pages/_app.js را تغییر دهید تا از این توابع استفاده کنید و بازدیدهای صفحه را در قلاب useEffect دنبال کنید.

import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
import { useRouter } from 'next/router';
import { useEffect } from "react";
import * as gtag from "../lib/gtag"
 
function MyApp({ Component, pageProps }: AppProps) {
  const router = useRouter();
 
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url);
    };
 
    router.events.on("routeChangeComplete", handleRouteChange);
 
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);
 
  return (
    <>
    <Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></Script>
    <Script
      id='google-analytics'
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXX', {
            page_path: window.location.pathname,
          });
        `,
        }}
    />
    <Layout>
      <Component {...pageProps} />
    </Layout>
    </>
  )
}

export default MyApp

این مثال از قلاب‌های useRouter و useEffect برای ضبط نمای صفحه هر بار که کاربر به صفحه دیگری می‌رود استفاده می‌کند.

مطلب مرتبط:   ایجاد درخواست HTTP در Rust با Reqwest

متد useRouter را از next/router فراخوانی کنید و آن را به متغیر روتر اختصاص دهید. در قلاب useEffect، به رویداد routeChangeComplete در روتر گوش دهید. هنگامی که رویداد فعال می شود، با فراخوانی تابع handleRouteChange یک نمای صفحه را ضبط کنید.

دستور بازگشت useEffect هوک اشتراک رویداد routeChangeComplete را با روش «خاموش» لغو می‌کند.

از Google Analytics برای جمع آوری داده های کاربر استفاده کنید

داده ها برای تصمیم گیری های خوب بسیار مفید هستند و افزودن Google Analytics به وب سایت شما یکی از راه های جمع آوری آن است.

می‌توانید Google Analytics را با استفاده از hooks به پروژه Next.js اضافه کنید تا مطمئن شوید که تمام بازدیدهای صفحه را حتی زمانی که یک صفحه از مسیریابی سمت مشتری استفاده می‌کند، ضبط می‌کنید. اکنون می توانید ببینید که سایت شما در داشبورد گوگل آنالیتیکس چند بازدید دارد.

Tags: