Read in English

GTM সেটআপ শুরু থেকে — server-side tracking-এর জন্য

GTM একদম খালি? Data layer, web container (variable, trigger, GA4 ও Meta Pixel tag) আর server container (GA4 client, Conversions API Tag) বানান — browser ও server-এর জন্য একই Event ID দিয়ে।

এই guide শুরু হয় একদম খালি Google Tag Manager web container থেকে, আর TrackPilot-এর সাথে server-side tracking-এর জন্য একটা shop-এর যা যা লাগে সব বানায়: data layer, web container-এর প্রতিটা variable, trigger ও tag, আর GA4 ও Meta Conversions API event পাঠানোর server container। Browser আর server event একই Event ID ব্যবহার করে, তাই Meta প্রতিটা action একবারই গোনে। সময় লাগবে প্রায় এক ঘণ্টা।

Server container host করা (Container Config, custom domain, loader snippet) আছে Server-side GTM (sGTM) সেটআপ guide-এর ধাপ ১–৫-এ। আগে সেগুলো করুন; এই page সেখান থেকেই এগোয়।

শুরুর আগে যা লাগবে

• Google Tag Manager-এ একটা web container (GTM-ABC1234) আর একটা server container; server container TrackPilot-এ চলছে আর আপনার domain active — নিচে আমরা https://data.yourshop.com লিখছি।
• TrackPilot dashboard থেকে নেওয়া first-party loader আপনার site-এর সব page-এ বসানো, আর পুরনো GTM snippet সরানো।
• আপনার Meta Pixel ID (Events Manager → আপনার dataset) আর একটা Conversions API access token (dataset → Settings → Generate access token)।
• ঐচ্ছিক: Google Analytics report চাইলে একটা GA4 Measurement ID (G-XXXXXXXXXX)।
• ধাপ ১-এর জন্য shop-এর code বা theme বদলাতে পারেন এমন কেউ।

সব অংশ কীভাবে জোড়া লাগে

1. আপনার shop purchase-এর মতো একটা event dataLayer-এ push করে।
2. Web container ওই event-এ দুটো tag fire করে: একটা Meta Pixel tag (browser event) আর একটা GA4 Event tag, যেটা Google-এ না গিয়ে আপনার tagging server-এ যায়।
3. Server container-এর GA4 client সেটা গ্রহণ করে, আর Conversions API Tag সেটা Meta-তে পাঠায় (server event)।
4. দুটোতেই একই event_id থাকে, তাই Meta একটা রাখে আর অন্যটাকে Deduplicated দেখায়।

ধাপ ১ — Website data layer

আপনার shop-কে GTM-কে জানাতে হবে কী ঘটেছে, GA4 ecommerce format-এ। এই চারটা event push করুন:

items-এর প্রতিটা entry-তে item_id, item_name, price আর quantity লাগবে। item_id আপনার product catalog-এর সাথে একই রাখুন (SKU বা product ID)। সংখ্যা অবশ্যই number হবে, মুদ্রার চিহ্নসহ text নয়।

প্রতিটা ecommerce event-এর ঠিক আগে সবসময় { ecommerce: null } push করুন। নাহলে GTM নতুন event-কে আগেরটার সাথে merge করে ফেলে, আর পুরনো item ঢুকে পড়ে।

window.dataLayer = window.dataLayer || [];

// Product page
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'BDT',
    value: 1200,
    items: [{ item_id: 'SKU-123', item_name: 'Cotton Panjabi', price: 1200, quantity: 1 }]
  }
});

// Thank-you page
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORD-10045',
    value: 2450,               // shipping আর discount-এর পরের order total
    currency: 'BDT',
    items: [
      { item_id: 'SKU-123', item_name: 'Cotton Panjabi', price: 1200, quantity: 2 },
      { item_id: 'SKU-456', item_name: 'Leather Belt', price: 50, quantity: 1 }
    ]
  },
  customer_data: {             // ঐচ্ছিক, Meta match quality বাড়ায়
    em: '[email protected]',
    ph: '8801712345678',       // country code + number, শুধু digit
    fn: 'Rahim'
  }
});

add_to_cart আর add_payment_info-এর গঠন view_item-এর মতোই। customer_data ঐচ্ছিক; customer যেখানে নিজে দিয়েছেন (checkout, thank-you page) শুধু সেখানেই push করুন। সাধারণ text হিসেবে পাঠান — Conversions API Tag আপনার server থেকে বেরোনোর আগেই hash করে দেয়। WooCommerce, Shopify আর বেশিরভাগ platform-এ GA4 data-layer plugin বা app এই push-গুলো বানিয়ে দেয়; GTM Preview-তে যাচাই করুন (ধাপ ৬)।

ধাপ ২ — Web container: variable

Web container → Variables → User-Defined Variables → New। নিচের প্রতিটা ঠিক এই নামে বানান — ধাপ ৪-এর tag-গুলো নাম ধরেই এদের খোঁজে।

Event ID: Variables → New → Variable Configuration → Discover more variable types in the Community Template Gallery → Event Id খুঁজুন → Add to workspace। নাম দিন Event ID। এটা প্রতিটা data-layer event-কে নিজস্ব একটা ID দেয়, আর একই event-এ fire হওয়া সব tag একই মান পায় — deduplication-এর জন্য ঠিক এটাই দরকার।

Custom JavaScript code (প্রতিটা আলাদা variable-এ paste করুন):

JS - FB Contents (String) — GA4 parameter text হিসেবে পাঠায়, তাই list-কে JSON string বানানো হয়:

function () {
  var items = {{DLV - ecommerce.items}} || [];
  return JSON.stringify(items.map(function (i) {
    return { id: String(i.item_id), quantity: Number(i.quantity) || 1, item_price: Number(i.price) || 0 };
  }));
}

JS - FB Contents (Array) — browser Pixel আসল list নেয়:

function () {
  var items = {{DLV - ecommerce.items}} || [];
  return items.map(function (i) {
    return { id: String(i.item_id), quantity: Number(i.quantity) || 1, item_price: Number(i.price) || 0 };
  });
}

JS - FB Content IDs

function () {
  var items = {{DLV - ecommerce.items}} || [];
  return items.map(function (i) { return String(i.item_id); });
}

JS - FB Value

function () {
  var items = {{DLV - ecommerce.items}} || [];
  var total = 0;
  for (var k = 0; k < items.length; k++) {
    total += (Number(items[k].price) || 0) * (Number(items[k].quantity) || 1);
  }
  return total;
}

JS - FB Num Items

function () {
  var items = {{DLV - ecommerce.items}} || [];
  var n = 0;
  for (var k = 0; k < items.length; k++) {
    n += Number(items[k].quantity) || 1;
  }
  return n;
}

এই guide-এ যেখানে {{DLV - ecommerce.value}} লেখা আছে, shop ecommerce.value push না করলে সেখানে {{JS - FB Value}} ব্যবহার করতে পারেন। purchase-এর জন্য আসল order total-ই ভালো, কারণ তাতে shipping আর discount ধরা থাকে।

ধাপ ৩ — Web container: trigger

Web container → Triggers → New:

একটা action-এর GA4 tag আর Meta tag-কে একই trigger ব্যবহার করতে হবে। তাহলে দুটোই একই data-layer event-এ fire করে আর একই {{Event ID}} পায়।

ধাপ ৪ — Web container: tag

৪.১ Google tag (GA4 আপনার server-এ পাঠায়)

Tags → New → Google tag। নাম দিন GA4 - Google tag।

• Tag ID: {{Const - GA4 Measurement ID}}।
• Configuration settings → এই parameter-গুলো যোগ করুন:

Trigger: Initialization - All Pages। এই tag page_view-ও পাঠায়।

৪.২ GA4 Event tag

Tags → New → Google Analytics: GA4 Event, প্রতি event-এ একটা: GA4 - view_item, GA4 - add_to_cart, GA4 - add_payment_info, GA4 - purchase।

• Measurement ID: {{Const - GA4 Measurement ID}}।
• Event Name: event-এর নাম হুবহু (view_item, add_to_cart, add_payment_info, purchase)।
• More Settings → Ecommerce → Send Ecommerce data টিক দিন, Data source Data Layer। এতে items list আর transaction_id যায়।
• Event Parameters:

Trigger: মিলে যাওয়া CE - … trigger। টিপ: GA4 - view_item পুরোটা বানিয়ে বাকি তিনটার জন্য Copy (⋮ menu) করুন, তারপর শুধু নাম, event name আর trigger বদলান।

৪.৩ Meta Pixel tag

Tags → New → Discover more tag types in the Community Template Gallery → Meta Pixel খুঁজুন → Add to workspace। এই official template ব্যবহার করুন, পুরনো Facebook Pixel (facebookarchive) template নয় — ওটায় Event ID field নেই।

পাঁচটা tag বানান। প্রতিটায়: Pixel ID = {{Const - Meta Pixel ID}}, Event Name = Standard + Meta event, আর More Settings → Event ID = {{Event ID}}। Meta-enabled Conversions API opt-in বন্ধ রাখুন — আপনার server container-ই server event পাঠায়।

চারটা ecommerce tag-এ Object Properties যোগ করুন (Property Name → Property Value):

৪.৪ Event map

Server-এর Conversions API Tag নিজেই GA4 event-কে Meta event-এর নামে বদলে নেয়। Browser tag-কে মিলিয়ে Meta-র নাম ব্যবহার করতে হবে:

ধাপ ৫ — Server container

1. Server container URL: server container → Admin → Container Settings → https://data.yourshop.com → Save (sGTM সেটআপ-এর ধাপ ৪ করে থাকলে এটা করাই আছে)।
2. Clients:
   • GA4 — প্রতিটা নতুন server container-এ থাকে। রেখে দিন; ধাপ ৪-এর event এটাই গ্রহণ করে।
   • Google Tag Manager: Web Container — Clients → New → এই type → Allowed Container IDs = GTM-ABC1234। বাধ্যতামূলক: এটা না থাকলে tagging server gtm.js-এ 400 Bad Request দেয়, আর আপনার site-এ কোনো tag-ই load হয় না।
3. Trigger: Triggers → New → Custom → Some Events → Client Name equals GA4। নাম দিন GA4 client - all events। (তালিকায় Client Name না থাকলে Variables → Configure থেকে চালু করুন।)
4. Conversions API Tag: Templates → Tag Templates → Search Gallery → facebookincubator-এর Conversions API Tag → Add। তারপর Tags → New → Conversions API Tag:

ঐচ্ছিক — Google Analytics report। server_container_url দিলে GA4 hit আর সরাসরি Google-এ যায় না। GA4 report রাখতে চাইলে Tags → New → Google Analytics: GA4 যোগ করুন (Measurement ID খালি রাখুন, event-এরটাই ব্যবহার হবে), trigger একই GA4 client - all events।

ধাপ ৬ — Publish ও যাচাই

1. আগে server container publish করুন (Submit → Publish), তারপর web container। উল্টো করলে website এমন server-এ পাঠাতে শুরু করে যেখানে এখনো Web Container client বা CAPI tag নেই। Tagging server নতুন version প্রায় এক মিনিটে load করে।
2. Site খুলে Ctrl+Shift+R দিয়ে hard-reload করুন — browser কয়েক মিনিট পুরনো gtm.js রেখে দেয়।
3. Web Preview (web container → Preview): একটা product দেখুন, cart-এ দিন, checkout করুন। প্রতিটা event-এ GA4 - … আর Meta - … দুটোই fired দেখাবে, আর Variables tab-এ {{Event ID}}-এর একটাই মান থাকবে।
4. Server Preview (server container → Preview, ওই tab খোলা রেখে অন্য tab-এ site ব্যবহার করুন): প্রতিটা request GA4 client নেবে। Event Data-তে event_id, items, value (number), contents (quote-এর ভেতর JSON list), x-fb-ck-fbp আর checkout-এ user_data দেখুন। Tags-এ Conversions API Tag fired হবে, আর graph.facebook.com-এ তার outgoing request 200 দেবে।
5. Events Manager → Test events: Test Event Code CAPI tag-এ দিয়ে publish করুন, আবার action-গুলো করুন। প্রতিটায় একটা Browser আর একটা Server row আসবে; server row-এ Deduplicated লেখা থাকবে আর দুটোর Event ID একই।
6. Meta Pixel Helper (Chrome extension): event খুললে browser-এর পাঠানো Event ID আর contents দেখায়।
7. Test Event Code মুছে server container আবার publish করুন। শেষ।

সাধারণ ভুল

• Server-এ contents দেখায় [object Object]: array ধরা GA4 parameter text হিসেবে যায়। GA4 tag-এ {{JS - FB Contents (String)}} ব্যবহার করুন; Array version শুধু Pixel-এ রাখুন।
• Server event-এ শুধু value আর currency: items list যাচ্ছে না। প্রতিটা GA4 Event tag-এ Send Ecommerce data টিক দিন।
• Pixel tag-এ Event ID field নেই: আপনি পুরনো "Facebook Pixel" (facebookarchive) template-এ আছেন। Meta Pixel template যোগ করুন, বা GTM-এর দেওয়া update accept করুন, তারপর More Settings → Event ID দিন।
• Publish করার পরেও বদল দেখা যাচ্ছে না: gtm.js cache হয়ে থাকে — hard-reload করুন, বা কয়েক মিনিট অপেক্ষা করুন।
• Test events-এ Browser row-এ Event ID নেই: ID পাঠানো হলেও browser row-এ ওই column প্রায়ই খালি থাকে। Meta Pixel Helper-এ দেখুন; server row-এ Deduplicated থাকলে কাজ হচ্ছে।

সমস্যা ও সমাধান

• কোনো tag-ই fire হয় না — loader-এর gtm.js 400 দেয়: Web Container client নেই, বা server container publish হয়নি (ধাপ ৫)।
• GA4 tag fire হয় কিন্তু server-এ কিছু পৌঁছায় না — Google tag-এর server_container_url দেখুন, আর TrackPilot dashboard-এ আপনার domain active কি না দেখুন।
• Server event আসে, কিন্তু CAPI tag fire হয় না — trigger অবশ্যই Client Name equals GA4 হতে হবে, আর request-টা GA4 client-কেই claim করতে হবে।
• CAPI request 400 দেয় — Pixel ID ভুল বা access token মেয়াদ শেষ; Server Preview-র response body-তে কারণ লেখা থাকে।
• Event দুবার গোনা হচ্ছে — একটা action-এর GA4 আর Meta tag আলাদা trigger ব্যবহার করছে, তাই Event ID আলাদা (ধাপ ৩)।

আরও কারণ ও সমাধান: sGTM সেটআপের সমস্যা ও সমাধান table। Meta কীভাবে browser আর server event মেলায়: Event deduplication।

Stuck? Ask for setup help — we answer in বাংলা or English.