Google Tag Manager with Next.js (TypeScript/Bangla)

এই ব্লগটিতে আমরা শিখব কিভাবে Next.js প্রোজেক্টে গুগল ট্যাগ ম্যানেজার ইমপ্লিমেন্ট করতে হয়।

এজন্য আমাদের প্রয়োজন হবে,

• Next.js প্রোজেক্ট
• গুগল ট্যাগ ম্যানেজার অ্যাকাউন্ট

ধাপসমূহ

১/ .env ফাইলে গুগল ট্যাগ ম্যানেজার আইডি ডিফাইন করা
২/ pages ফোল্ডার এর মধ্যে _document.tsx ফাইল তৈরি করা
৩/ lib/gtm/index.tsx ফাইল তৈরি করে প্রয়োজনীয় ফাংশন ডিফাইন করা
৪/ _app.tsx ফাইলে রাউট পরিবর্তন ট্র্যাক করা

১ম ধাপঃ

রুট ডিরেক্টরিতে .env ফাইলর মধ্যে আপনার প্রোজেক্টের গুগল ট্যাগ ম্যানেজার আইডি অ্যাড করুন।

GTM-XXXXXXX এর স্থলে আপানর গুগল ট্যাগ ম্যানেজার আইডি লিখুন।

২য় ধাপঃ

pages ফোল্ডারের মধ্যে _document.tsx ফাইল তৈরি করে গুগল ট্যাগ ম্যানেজার কনফিগার করুন।

_document.tsx সম্পর্কে বিস্তারিত জানতে Next.js documentation পড়তে পারেন।

সমস্যাঃ

গুগল ট্যাগ ম্যানেজার শুধুমাত্র পেইজ রিলোড করলে ট্যাগ ফায়ার করে। যেহেতু React/Next.js এরমতো সিঙ্গেল পেইজ অ্যাপ্লিকেশানে রাউট পরিবর্তন হলেও পেইজ রিলোড হয় না। ফলে প্রথমবার ওয়েবসাইটে ঢুকলে ট্যাগ ফায়ার হয় পরবর্তীতে রাউট পরিবর্তন করলেও ট্যাগ ফায়ার হয় না।

সমাধানঃ

এই সমস্যার থেকে পরিত্রান পাওয়ার জন্য আমাদেরকে ম্যানুয়াল ভাবে প্রতিবার রাউট পরিবর্তন হলে নিম্নউক্ত pageview ফাংশন কল করতে হবে এবং গুগল ট্যাগে হিস্টরি চেইঞ্জ ট্রিগার অ্যাড করতে হবে।

হিস্টরি চেইঞ্জে ট্রিগারঃ documentation

৩য় ধাপঃ

রুট ডিরেক্টরিতে lib/gtm ফোল্ডার তৈরি করে তার মধ্যে index.tsx ফাইল তৈরি করুন এবং pageviews এবং events ট্রাক করার জন্য কাস্টমে ফাংশন লিখুন।

৪য় ধাপঃ

এখন রাউট পরিবর্তনে pageview ফাংশন কল করার জন্য _app.tsx ফাইলে useEffect হুক ব্যবহার করুন।

ব্যাস হয়ে গেলো ইমপ্লিমেন্টেশন।