اسماعیل جعفری
اسماعیل جعفری
خواندن ۲ دقیقه·۳ سال پیش

نحوه اضافه کردن اسکریپت گوکل آنالیتیکس به پروژهای Next js

خوب بدون مقدمه و حاشیه بریم سر اصل مطلب !

اکثر جاها برای اینکه گوگل آنالیتیکس نصب و راه اندازی کنی برای سایتت فقط کافیه دو تا اسکریپت که گوگل آنالیتیکس بهت میده داخل تگ head قرار بدید و کار تموم می شه

ولی خوب Next داستان خودشو داره برای این کار باید اول به روت Pages ی فایل documents.jsx_ یا اگه پروژه تون typescript template هستش documents.tsx_ اضافه کنید

این فایل کارش اینه که از تکرار تگ های HTML شامل meta , link , script که بین Rout هاتون مشترک هست جلوگیری کنه. دو تا عکس پایینی هم نمونه typescript و هم javascript که محل قرارگیری اسکریپت های گوگل آنالیتیکس داخل کدها مشخصه

  • اسکریپت گوگل آنالیتیکس برای هر سایتی یه شناسه داره مثل UA-123456789-1 داخل کدهای زیر اونو جایگزین کنید
محتویات فایل docments.tsx_
محتویات فایل docments.tsx_
محتویات فایل docments.jsx_
محتویات فایل docments.jsx_

خوب تا اینجا کار تو document خود Next هست ... و verify میشه ولی ی اتفاق بدی که میوفته تو گوگل آنالیتیکس نمیتونی real time چک کنی فقط میگه کاربر از چه لینکی اومده ، الان کجاست ؟ خدا میدونه :)

برای اینکه به گوگل بفهمونی کاربر تو چه صفحه ای الان هست باید دست به دامان next/router بشی داخل فایل app.js_ و دو تا function گوگلی ادد کنی تو پروژه ات (هر فایلی که خودت فکر میکنی جاش مهم نیست ولی باید import شه تو فایل app.js_) من برای جدا بودن تو روت پروژه ی پوشه lib ساختم و داخل پوشه lib یه پوشه ga و داخلش ی فایلindex.tsx ساختم و کدمو ریختم داخلش :)

این مدلی
این مدلی

خوب دو تا عکس زیری هم مدل typescript و javascript ش

typescript google functions
typescript google functions


javascript google functions
javascript google functions

حالا موقعشه بریم سر وقت app و دست به دامان router شدن

برای اینکار باید داخل فانکشن app از هوک useRouter بعلاوه هوک useEffect استفاده کنیم به شکل زیر و اون فانکشن های گوگل ایمپورت کنی داخل app

_app.js  کانفیگ فایل
_app.js کانفیگ فایل


حالا یعد از deploy سایت می تونید داخل گوگل آنالیتیکس login کنید و لذتشو ببرید :)


nextanalyticsنکستری اکتreact
front end developer
شاید از این پست‌ها خوشتان بیاید