# Pentanik IT — GTM-Only Analytics Update Package

এই প্যাকেজে আপনার Laravel + Livewire e-commerce প্রোজেক্টের সম্পূর্ণ আপডেটেড GTM সেটআপ আছে। **সব platform-এর data এখন একটি GTM container থেকেই control হবে** — কোডে কোনো `fbq()`, `gtag()`, বা সরাসরি Pixel snippet আর নেই।

---

## 📁 Files in this package

```
output/
├── config/
│   └── services.php                                   ← unchanged (reference only)
├── resources/views/
│   ├── partials/
│   │   ├── analytics-helper.blade.php                 ← REPLACED (all 24 events)
│   │   ├── gtm-head.blade.php                         ← unchanged
│   │   └── gtm-body.blade.php                         ← unchanged
│   ├── frontend/layouts/
│   │   └── app.blade.php                              ← REPLACED (no fbq/gtag)
│   └── livewire/
│       ├── frontend/
│       │   ├── cart.blade.php                         ← REPLACED (begin_checkout fix)
│       │   └── cart-summary.blade.php                 ← REPLACED (begin_checkout fix)
│       └── order-success.blade.php                    ← REPLACED (cleaned)
└── README.md                                          ← এই ফাইল
```

আপনার প্রোজেক্টে এই ফাইলগুলো একই path-এ replace করুন — তারপর `php artisan view:clear` চালান।

---

## ✅ Event Coverage (24/24)

| # | Event | কোথায় ফায়ার হয় | Status |
|---|---|---|---|
| 1 | `purchase` | `livewire/order-success.blade.php` (idempotent via sessionStorage) | ✅ |
| 2 | `add_to_cart` | `ProductBox.php`, `Wishlist.php`, `Product/Details.php` | ✅ |
| 3 | `begin_checkout` | `cart.blade.php`, `cart-summary.blade.php` (Proceed click) + `checkout.blade.php` | ✅ **NEW FIX** |
| 4 | `view_item` | `Product/Details.php` (mount + variant change) | ✅ |
| 5 | `add_payment_info` | `CartSummary.php`, `Checkout.php` (order save) | ✅ |
| 6 | `view_cart` | `cart.blade.php`, `cart-summary.blade.php` (panel open) | ✅ |
| 7 | `add_shipping_info` | `CartSummary.php`, `Checkout.php` (order save) | ✅ |
| 8 | `view_item_list` | `category.blade.php`, `shop.blade.php`, homepage `index.blade.php` | ✅ |
| 9 | `remove_from_cart` | `Cart.php`, `CartSummary.php` | ✅ |
| 10 | `select_item` | `product-box.blade.php` → `data-ga-*` attributes (auto click delegate) | ✅ |
| 11 | `add_to_wishlist` | `ProductBox.php`, `Shop.php`, `Product/Details.php` | ✅ |
| 12 | `refund` | Helper available (`window.Analytics.refund()`); ফায়ার করতে admin-side থেকে call করতে হবে — নিচে দেখুন | ⚙️ ready |
| 13 | `view_promotion` | Auto IntersectionObserver — যেকোনো element-এ `data-promotion-id` থাকলে fire হবে | ⚙️ ready |
| 14 | `select_promotion` | Auto click delegate — promotion element ক্লিক করলে fire হবে | ⚙️ ready |
| 15 | `whatsapp_click` | Auto — যেকোনো wa.me / wa.link / whatsapp.com / whatsapp:// লিংকে ক্লিক | ✅ |
| 16 | `phone_call_click` | Auto — যেকোনো `tel:` লিংকে ক্লিক | ✅ |
| 17 | `newsletter_signup` | Helper available; newsletter form লাগালে call করুন | ⚙️ ready |
| 18 | `out_of_stock_view` | `Product/Details.php` (stock = 0 হলে) | ✅ |
| 19 | `view_size_chart` | Auto — যেকোনো button/link-এ `data-size-chart` attribute থাকলে fire হবে | ⚙️ ready |
| 20 | `compare_products` | Auto — `data-compare-products="id1,id2,id3"` attribute দিলে fire হবে | ⚙️ ready |
| 21 | `submit_review` | `Product/Details.php` (review submit হলে) | ✅ |
| 22 | `scroll_depth` (75% / 90%) | Auto — সব পেইজে, SPA-aware (Livewire navigation এ reset হয়) | ✅ |
| 23 | `video_engagement` | Auto — native `<video>` (play/complete) + YouTube/Vimeo iframe (প্রথম ক্লিক) | ✅ |
| 24 | `coupon_applied` | Helper available; coupon UI লাগালে call করুন | ⚙️ ready |

**Legend:**
- ✅ = Already firing in your existing code paths
- ⚙️ ready = Helper তৈরি আছে, ফায়ার করতে নিচের code snippet ব্যবহার করুন বা attribute যোগ করুন

---

## 🔧 যেসব ফিক্স করা হয়েছে

### 1. **Facebook Pixel snippet সরানো হয়েছে** (`app.blade.php`)
আগে: `fbq('init', '357341633807893')` সরাসরি head-এ load হত। এখন সম্পূর্ণ সরানো হয়েছে।
**এখন GTM-এ Meta Pixel tag set করতে হবে** — নিচের "GTM Workspace Setup" সেকশন দেখুন।

### 2. **Google Ads gtag snippet সরানো হয়েছে** (`app.blade.php`)
আগে: `AW-789742398` সরাসরি load হত। এখন সম্পূর্ণ সরানো।
**এখন GTM-এ Google Ads tag set করতে হবে।**

### 3. **Inline `fbq()` কল সরানো হয়েছে** (analytics helper, layout)
আগে `addToCart`, `purchase`, `viewItem`, `addToWishlist`, `beginCheckout` — সব functions-এ Facebook Pixel-এর জন্য আলাদা `fbq('track', ...)` কল ছিল। এগুলো সব মুছে ফেলা হয়েছে।
**GTM-এ আপনি একটি Custom Event Trigger তৈরি করে dataLayer থেকে Meta Pixel-এ data forward করবেন।**

### 4. **Duplicate `page_view` shim ফিক্স** (`app.blade.php`)
আগে দুইটা প্রায়-একই SPA page_view shim ছিল — duplicate ফায়ারিং-এর risk ছিল। এখন একটি single, clean shim।

### 5. **Modal checkout flow-এ `begin_checkout` ফিক্স** (`cart.blade.php`, `cart-summary.blade.php`)
**এটা সবচেয়ে বড় ফিক্স** — আগে "Proceed To Checkout" button-এ ক্লিক করলে শুধু modal খুলত, কোনো `begin_checkout` event fire হত না। অর্থাৎ funnel-এর একটা পুরো step হারিয়ে যেত।

এখন button-এর `@click`-এ `window.dispatchEvent(new CustomEvent('begin-checkout', ...))` যোগ করা হয়েছে — যা analytics-helper-এর bridge দিয়ে `Analytics.beginCheckout()` কল করে।

### 6. **নতুন event: `refund`**
Helper তৈরি — `window.Analytics.refund({ invoice_no, total, items })`। নিচে call example দেওয়া আছে।

### 7. **নতুন event: `view_size_chart`**
Auto-detect — যেকোনো element-এ `data-size-chart` attribute দিলেই fire হবে।

### 8. **নতুন event: `compare_products`**
Auto-detect — `data-compare-products="123,456,789"` দিলে fire হবে।

### 9. **Dev logger production-safe হয়েছে** (`app.blade.php`)
আগে localhost-check দিয়ে runtime-এ logger inject হত। এখন `@if(config('app.debug'))` দিয়ে server-side gated — production build-এ logger কোডই থাকবে না।

### 10. **`review-submitted` orphan listener সরানো হয়েছে** — শুধু `submit-review` রাখা হয়েছে।

### 11. **Footer phone link-এ `data-location="footer"` যোগ করা হয়েছে** — যাতে `phone_call_click` event-এ সঠিক location label আসে।

---

## 🎯 GTM Workspace Setup (Manual Steps in tagmanager.google.com)

GTM container ID: **`GTM-N998QWL9`** (ইতিমধ্যে আপনার `.env`-এ আছে)

GTM container-এ লগইন করে নিচের tags/triggers তৈরি করুন:

### Step 1 — Variables তৈরি করুন
Workspace → Variables → User-Defined Variables → New → "Data Layer Variable":

| Variable Name | Data Layer Variable Name |
|---|---|
| DLV - ecommerce.value | `ecommerce.value` |
| DLV - ecommerce.currency | `ecommerce.currency` |
| DLV - ecommerce.transaction_id | `ecommerce.transaction_id` |
| DLV - ecommerce.items | `ecommerce.items` |
| DLV - ecommerce.coupon | `ecommerce.coupon` |
| DLV - ecommerce.shipping | `ecommerce.shipping` |
| DLV - ecommerce.tax | `ecommerce.tax` |
| DLV - user_id | `user_id` |
| DLV - page_location | `page_location` |
| DLV - page_title | `page_title` |
| DLV - scroll_percent | `scroll_percent` |
| DLV - video_action | `video_action` |
| DLV - video_title | `video_title` |
| DLV - product_id | `product_id` |
| DLV - rating | `rating` |
| DLV - link_url | `link_url` |
| DLV - phone_number | `phone_number` |
| DLV - coupon | `coupon` |
| DLV - discount | `discount` |
| DLV - product_ids | `product_ids` |
| DLV - product_count | `product_count` |

### Step 2 — Triggers তৈরি করুন
Workspace → Triggers → New → "Custom Event":

প্রতিটার জন্য আলাদা trigger:

| Trigger Name | Event name (exact match) |
|---|---|
| CE - purchase | `purchase` |
| CE - add_to_cart | `add_to_cart` |
| CE - begin_checkout | `begin_checkout` |
| CE - view_item | `view_item` |
| CE - add_payment_info | `add_payment_info` |
| CE - view_cart | `view_cart` |
| CE - add_shipping_info | `add_shipping_info` |
| CE - view_item_list | `view_item_list` |
| CE - remove_from_cart | `remove_from_cart` |
| CE - select_item | `select_item` |
| CE - add_to_wishlist | `add_to_wishlist` |
| CE - refund | `refund` |
| CE - view_promotion | `view_promotion` |
| CE - select_promotion | `select_promotion` |
| CE - whatsapp_click | `whatsapp_click` |
| CE - phone_call_click | `phone_call_click` |
| CE - newsletter_signup | `newsletter_signup` |
| CE - out_of_stock_view | `out_of_stock_view` |
| CE - view_size_chart | `view_size_chart` |
| CE - compare_products | `compare_products` |
| CE - submit_review | `submit_review` |
| CE - scroll_depth | `scroll_depth` |
| CE - video_engagement | `video_engagement` |
| CE - coupon_applied | `coupon_applied` |
| CE - page_view | `page_view` |

### Step 3 — Tags তৈরি করুন

#### A) GA4 Configuration Tag
- **Tag Type:** Google Tag (formerly GA4 Configuration)
- **Measurement ID:** `G-XXXXXXXXXX` (আপনার GA4 stream-এর measurement ID — `.env`-এ থাকা `ANALYTICS_PROPERTY_ID=409617725` GA4 Data API-র জন্য, এটা measurement ID নয়। GA4 → Admin → Data Streams → Web stream থেকে `G-` দিয়ে শুরু হওয়া ID নিন)
- **Trigger:** Initialization - All Pages (অথবা CE - page_view)

#### B) GA4 Event Tag — 24টি ইভেন্টের জন্য একটি করে
**সহজ পদ্ধতি (recommended):** একটাই GA4 Event tag তৈরি করুন যে সব 24টি custom event trigger করে এবং event name dynamically পাঠায়:

- **Tag Type:** Google Analytics: GA4 Event
- **Configuration Tag:** আপনার GA4 Configuration tag select করুন
- **Event Name:** `{{Event}}` (built-in variable — সবসময় current event-এর নাম pass করবে)
- **Event Parameters** (Add Row):
  - `currency` → `{{DLV - ecommerce.currency}}`
  - `value` → `{{DLV - ecommerce.value}}`
  - `transaction_id` → `{{DLV - ecommerce.transaction_id}}`
  - `items` → `{{DLV - ecommerce.items}}`
  - `coupon` → `{{DLV - ecommerce.coupon}}`
  - `shipping` → `{{DLV - ecommerce.shipping}}`
  - `tax` → `{{DLV - ecommerce.tax}}`
- **Trigger:** সব 24টি `CE - *` triggers যোগ করুন (একসাথে)

#### C) Meta (Facebook) Pixel Tag
GTM-এ Pixel ID `357341633807893` set করুন:

- **Tag Type:** Custom HTML
- **HTML:**
```html
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}
(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '357341633807893');
fbq('track', 'PageView');
</script>
```
- **Trigger:** Initialization - All Pages
- **Tag firing options:** Once per page

তারপর প্রতিটি ecommerce event-এর জন্য আলাদা **Custom HTML** tag (Pixel যেহেতু dataLayer auto-listen করে না, manually map করতে হবে) বা সরাসরি একটাই tag যা সব handle করে — এই ম্যাপিং অনুসরণ করুন:

| GA4 Event (dataLayer) | Meta Pixel Event |
|---|---|
| `view_item` | `ViewContent` |
| `add_to_cart` | `AddToCart` |
| `add_to_wishlist` | `AddToWishlist` |
| `begin_checkout` | `InitiateCheckout` |
| `add_payment_info` | `AddPaymentInfo` |
| `purchase` | `Purchase` |
| `submit_review` | `SubmitApplication` (custom alternative) |

উদাহরণ — `AddToCart` tag (Custom HTML):
```html
<script>
  if (typeof fbq === 'function') {
    var items = {{DLV - ecommerce.items}} || [];
    fbq('track', 'AddToCart', {
      content_ids: items.map(function(i){ return String(i.item_id); }),
      content_type: 'product',
      value: {{DLV - ecommerce.value}} || 0,
      currency: {{DLV - ecommerce.currency}} || 'BDT'
    });
  }
</script>
```
- **Trigger:** `CE - add_to_cart`

একইভাবে `Purchase`, `ViewContent`, `AddToWishlist`, `InitiateCheckout` — প্রত্যেকের জন্য একটা করে Custom HTML tag বানান।

#### D) Google Ads Conversion Tag
- **Tag Type:** Google Ads Conversion Tracking
- **Conversion ID:** `AW-789742398`
- **Conversion Label:** Google Ads-এ গিয়ে আপনার Purchase conversion action তৈরি করে label নিন
- **Conversion Value:** `{{DLV - ecommerce.value}}`
- **Order ID:** `{{DLV - ecommerce.transaction_id}}`
- **Currency:** `{{DLV - ecommerce.currency}}`
- **Trigger:** `CE - purchase`

আলাদা করে **Google Ads Remarketing** tag-ও তৈরি করুন (All Pages trigger-এ) — Conversion ID `AW-789742398`, Conversion Label খালি রাখুন।

---

## 🔌 যেসব Helper এখন কোডে আছে কিন্তু আপনাকে নিজে call করতে হবে

### A) Refund event (Admin-side থেকে)
যখন admin order refund দেয়, তখন order detail page-এ এই code চালান:

```javascript
window.Analytics.refund({
    invoice_no: 'ORDER_CODE_HERE',
    total: 1500,           // refund amount; full refund হলে order total
    items: [               // partial refund হলে শুধু refunded items, full refund-এ items বাদ দিতে পারেন
        { id: '12', name: 'Product A', price: 1000, quantity: 1 },
        { id: '15', name: 'Product B', price: 500,  quantity: 1 }
    ]
});
```

অথবা Livewire component থেকে:
```php
$this->dispatch('refund',
    invoice_no: $order->code,
    total:      (float) $order->total,
    items:      $itemsArray
);
```

### B) Newsletter signup
Footer/popup-এ newsletter form যোগ করার সময়, submit success-এর পর:
```javascript
window.Analytics.newsletterSignup({
    method: 'website',
    location: 'footer',     // বা 'popup', 'sidebar' ইত্যাদি
    email: true             // boolean — সত্যিই email collect করেছেন কিনা
});
```

### C) Coupon applied
Coupon UI বানানোর পর, কুপন successfully apply হলে:
```javascript
window.Analytics.couponApplied({
    coupon: 'SAVE20',
    discount: 200
});
```

### D) View size chart (Auto — শুধু attribute দিন)
Size chart modal/link-এর HTML-এ যোগ করুন:
```html
<button data-size-chart
        data-product-id="{{ $product->id }}"
        data-product-name="{{ $product->name }}"
        data-product-category="{{ $category }}">
    View Size Chart
</button>
```
ক্লিক হলেই auto fire হবে।

### E) Compare products (Auto — শুধু attribute দিন)
Compare button-এ:
```html
<button data-compare-products="{{ implode(',', $compareIds) }}">
    Compare ({{ count($compareIds) }})
</button>
```

### F) Promotion banner tracking (Auto — শুধু attribute দিন)
যেকোনো promotion banner/card-এ:
```html
<a href="{{ $banner->link }}"
   data-promotion-id="{{ $banner->id }}"
   data-promotion-name="{{ $banner->title }}"
   data-promotion-creative="{{ $banner->image }}"
   data-promotion-slot="homepage_hero"
   data-promotion-location="home">
   <img src="{{ $banner->image }}">
</a>
```
- Element viewport-এ আসলে → `view_promotion` fire হয়
- Element-এ ক্লিক করলে → `select_promotion` fire হয়

---

## 🧪 যাচাই (How to Verify Events Are Firing)

### 1) Browser Console (Dev Mode)
`.env`-এ `APP_DEBUG=true` থাকলে প্রতিটি dataLayer push console-এ log হবে। যেকোনো action করে console দেখুন।

### 2) GTM Preview Mode
1. GTM workspace-এ "Preview" button ক্লিক করুন
2. আপনার সাইটের URL দিন
3. Tag Assistant window-এ "Data Layer" tab → প্রতিটি action-এর সাথে event চলে আসছে কিনা দেখুন
4. "Tags" tab-এ → কোন tags fire করেছে সেটা দেখুন

### 3) GA4 Realtime Reports
GA4 → Reports → Realtime → "Event count by Event name" দেখুন। 30 সেকেন্ড-এর মধ্যে event দেখা যাবে।

### 4) Meta Events Manager
Meta Events Manager → Test Events tab-এ Test Event Code দিয়ে যাচাই করুন।

### 5) Google Ads Tag Assistant
Chrome extension "Google Tag Assistant Legacy" দিয়ে যেকোনো পেইজে Tag firing verify করুন।

---

## ⚠️ Deployment Checklist

- [ ] `.env`-এ `GTM_ID=GTM-N998QWL9` আছে কিনা যাচাই করুন
- [ ] সব ফাইল replace করে `php artisan view:clear` চালান
- [ ] `php artisan config:clear` চালান
- [ ] `php artisan optimize` চালান
- [ ] Production-এ `APP_DEBUG=false` করুন (dev logger বন্ধ হয়ে যাবে)
- [ ] GTM workspace-এ সব tags publish করুন (workspace draft → submit → publish)
- [ ] GTM Preview mode-এ সব 24টি event verify করুন
- [ ] GA4 Realtime-এ test purchase করে event দেখুন
- [ ] Meta Events Manager-এ Test Event দিয়ে Pixel verify করুন

---

## 📞 কোডে কোন third-party library load হবে না

**নিশ্চিতভাবে সরানো হয়েছে:**
- ❌ `connect.facebook.net/en_US/fbevents.js` (Meta Pixel base library)
- ❌ `googletagmanager.com/gtag/js?id=AW-...` (Google Ads gtag)
- ❌ সব `fbq('track', ...)` কল
- ❌ সব `gtag(...)` কল

**শুধু একটি জিনিস load হচ্ছে:**
- ✅ `googletagmanager.com/gtm.js?id=GTM-N998QWL9` (GTM container)

GTM container-এর ভেতর থেকে অন্য সব platform load হবে — যা আপনি GTM workspace থেকে control করতে পারবেন।

---

কোনো প্রশ্ন থাকলে বা GTM tag-এর JSON template (import-able) লাগলে জানান — আমি `gtm-container-export.json` তৈরি করে দিতে পারি যা GTM-এ এক ক্লিকে import করা যাবে।
