এই ব্লগটিতে আমরা শিখব কিভাবে Next.js প্রোজেক্টে গুগল ট্যাগ ম্যানেজার ইমপ্লিমেন্ট করতে হয়।
এজন্য আমাদের প্রয়োজন হবে,
- Next.js প্রোজেক্ট
- গুগল ট্যাগ ম্যানেজার অ্যাকাউন্ট
ধাপসমূহ
১/ .env ফাইলে গুগল ট্যাগ ম্যানেজার আইডি ডিফাইন করা
২/ pages ফোল্ডার এর মধ্যে _document.tsx ফাইল তৈরি করা
৩/ lib/gtm/index.tsx ফাইল তৈরি করে প্রয়োজনীয় ফাংশন ডিফাইন করা
৪/ _app.tsx ফাইলে রাউট পরিবর্তন ট্র্যাক করা
১ম ধাপঃ
রুট ডিরেক্টরিতে .env ফাইলর মধ্যে আপনার প্রোজেক্টের গুগল ট্যাগ ম্যানেজার আইডি অ্যাড করুন।
| NEXT_PUBLIC_GOOGLE_ANALYTICS = GTM-XXXXXXX | |
GTM-XXXXXXX এর স্থলে আপানর গুগল ট্যাগ ম্যানেজার আইডি লিখুন।
২য় ধাপঃ
pages ফোল্ডারের মধ্যে _document.tsx ফাইল তৈরি করে গুগল ট্যাগ ম্যানেজার কনফিগার করুন।
_document.tsx সম্পর্কে বিস্তারিত জানতে Next.js documentation পড়তে পারেন।
| import Document, { Html, Head, Main, NextScript } from "next/document"; | |
| export default class MyDocument extends Document { | |
| render() { | |
| return ( | |
| <Html> | |
| <Head> | |
| <script | |
| dangerouslySetInnerHTML={{ | |
| __html: ` | |
| (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': | |
| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], | |
| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= | |
| 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); | |
| })(window,document,'script','dataLayer', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}'); | |
| `, | |
| }} | |
| /> | |
| </Head> | |
| <body> | |
| <noscript> | |
| <iframe | |
| src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`} | |
| height="0" | |
| width="0" | |
| style={{ display: "none", visibility: "hidden" }} | |
| /> | |
| </noscript> | |
| <Main /> | |
| <NextScript /> | |
| </body> | |
| </Html> | |
| ); | |
| } | |
| } |
সমস্যাঃ
গুগল ট্যাগ ম্যানেজার শুধুমাত্র পেইজ রিলোড করলে ট্যাগ ফায়ার করে। যেহেতু React/Next.js এরমতো সিঙ্গেল পেইজ অ্যাপ্লিকেশানে রাউট পরিবর্তন হলেও পেইজ রিলোড হয় না। ফলে প্রথমবার ওয়েবসাইটে ঢুকলে ট্যাগ ফায়ার হয় পরবর্তীতে রাউট পরিবর্তন করলেও ট্যাগ ফায়ার হয় না।
সমাধানঃ
এই সমস্যার থেকে পরিত্রান পাওয়ার জন্য আমাদেরকে ম্যানুয়াল ভাবে প্রতিবার রাউট পরিবর্তন হলে নিম্নউক্ত pageview ফাংশন কল করতে হবে এবং গুগল ট্যাগে হিস্টরি চেইঞ্জ ট্রিগার অ্যাড করতে হবে।
হিস্টরি চেইঞ্জে ট্রিগারঃ documentation
৩য় ধাপঃ
রুট ডিরেক্টরিতে lib/gtm ফোল্ডার তৈরি করে তার মধ্যে index.tsx ফাইল তৈরি করুন এবং pageviews এবং events ট্রাক করার জন্য কাস্টমে ফাংশন লিখুন।
| declare global { | |
| interface Window { | |
| dataLayer: any; | |
| } | |
| } | |
| export const pageview = (url) => { | |
| window.dataLayer.push({ | |
| event: "pageview", | |
| page: url, | |
| }); | |
| }; |
৪য় ধাপঃ
এখন রাউট পরিবর্তনে pageview ফাংশন কল করার জন্য _app.tsx ফাইলে useEffect হুক ব্যবহার করুন।
| import type { AppProps /*, AppContext */ } from "next/app"; | |
| import { useEffect } from "react"; | |
| import { useRouter } from "next/router"; | |
| import * as gtm from "../lib/gtm"; | |
| function MyApp({ Component, pageProps }: AppProps): JSX.Element { | |
| const router = useRouter(); | |
| useEffect(() => { | |
| router.events.on("routeChangeComplete", gtm.pageview); | |
| return () => { | |
| router.events.off("routeChangeComplete", gtm.pageview); | |
| }; | |
| }, [router.events]); | |
| return <Component {...pageProps} />; | |
| } | |
| export default MyApp; |
ব্যাস হয়ে গেলো ইমপ্লিমেন্টেশন।
Top comments (0)