Learn PHP, JavaScript, cookies, user tracking, and how to reach the right people — step by step.
PHP, JavaScript, কুকি, ব্যবহারকারী ট্র্যাকিং এবং সঠিক মানুষের কাছে পৌঁছানো — ধাপে ধাপে শিখুন।
A landing page is a single web page designed to get visitors to do one thing — sign up, buy, or learn. PHP handles the server side. JavaScript makes things interactive on the screen.
ল্যান্ডিং পেজ হলো এমন একটি পেজ যা ভিজিটরকে একটি কাজ করাতে চায় — সাইন আপ, কেনাকাটা বা শেখা। PHP সার্ভার সাইড সামলায়। JavaScript পর্দায় ইন্টারেক্টিভ করে।
Runs on the server. Sends the page to the browser. Handles form data and talks to a database.
সার্ভারে চলে। ব্রাউজারে পেজ পাঠায়। ফর্ম ডেটা সামলায় এবং ডেটাবেজে কথা বলে।
Runs in the browser. Reacts to clicks, tracks scrolls, and updates the page without a reload.
ব্রাউজারে চলে। ক্লিক ধরে, স্ক্রোল ট্র্যাক করে, পেজ রিলোড ছাড়াই আপডেট করে।
<?php
// Start session so we can remember the user across pages
session_start();
// Record the first visit time (only once)
if (!isset($_SESSION['first_visit'])) {
$_SESSION['first_visit'] = date('Y-m-d H:i:s');
}
// Get the page the user came from (referrer)
$referrer = $_SERVER['HTTP_REFERER'] ?? 'Direct visit';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to Our Product</h1>
<p>You came from: <?= htmlspecialchars($referrer) ?></p>
<!-- A simple sign-up form -->
<form method="POST" action="save.php">
<input type="email" name="email" placeholder="Your email" required>
<button type="submit">Get Started Free</button>
</form>
<script src="track.js"></script>
</body>
</html><?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Clean the email before saving
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Save to a text file (for learning — use a database in production)
$line = $email . ' | ' . date('Y-m-d H:i:s') . "\n";
file_put_contents('leads.txt', $line, FILE_APPEND);
// Redirect to a thank-you page
header('Location: thank-you.php');
exit;
}
}
?>You can watch how long a user stays, which sections they scroll to, and what they click. This tells you what they care about.
ব্যবহারকারী কতক্ষণ থাকে, কোন অংশে স্ক্রোল করে এবং কী ক্লিক করে — এটি দেখাতে পারেন। এটি বলে দেয় তারা কীসে আগ্রহী।
Start a timer when the page loads. Stop it when they leave. Send the total to your server.
পেজ লোড হলে টাইমার শুরু করুন। চলে যাওয়ার সময় থামান। মোট সময় সার্ভারে পাঠান।
See how far they read. Did they reach the pricing section? The sign-up form?
তারা কতটুকু পড়লো দেখুন। মূল্য বিভাগে পৌঁছেছে? সাইন-আপ ফর্মে?
Log every button and link click. Find out which call-to-action works best.
প্রতিটি বাটন ও লিংক ক্লিক রেকর্ড করুন। কোন কল-টু-অ্যাকশন সবচেয়ে ভালো কাজ করে জানুন।
Detect when a section enters the screen. Know which parts of the page actually get seen.
কখন একটি বিভাগ স্ক্রিনে আসে তা শনাক্ত করুন। পেজের কোন অংশ আসলে দেখা যায় জানুন।
// ── 1. Time on Page ──────────────────────
const startTime = Date.now();
// When the user is about to leave, send the time spent
window.addEventListener('beforeunload', () => {
const seconds = Math.round((Date.now() - startTime) / 1000);
// navigator.sendBeacon works even when the tab is closing
navigator.sendBeacon('/log.php', JSON.stringify({
event: 'time_spent',
seconds: seconds
}));
});
// ── 2. Scroll Depth ──────────────────────
let maxScroll = 0;
window.addEventListener('scroll', () => {
const pct = Math.round(
(window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
);
if (pct > maxScroll) {
maxScroll = pct;
// Fire an event at 25%, 50%, 75%, 100%
if ([25, 50, 75, 100].includes(pct)) {
sendEvent('scroll_depth', { depth: pct });
}
}
});
// ── 3. Click Tracking ────────────────────
document.addEventListener('click', (e) => {
const el = e.target.closest('[data-track]');
if (el) {
sendEvent('click', {
label: el.dataset.track,
text: el.textContent.trim()
});
}
});
// ── 4. Section Visibility ────────────────
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
sendEvent('section_view', { id: entry.target.id });
observer.unobserve(entry.target); // Only record once
}
});
}, { threshold: 0.5 }); // Section must be 50% visible
document.querySelectorAll('[data-section]').forEach(el => observer.observe(el));
// ── Helper: send data to server ──────────
function sendEvent(type, data) {
fetch('/log.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ event: type, ...data, ts: Date.now() })
});
}A cookie is a small piece of text that the browser saves on the user's computer. The browser sends it back to your server on every visit. This is how websites remember you.
কুকি হলো একটি ছোট টেক্সট যা ব্রাউজার ব্যবহারকারীর কম্পিউটারে সেভ করে। প্রতিটি ভিজিটে ব্রাউজার এটি সার্ভারে ফেরত পাঠায়। এভাবেই ওয়েবসাইট আপনাকে মনে রাখে।
<?php
// ── Set a cookie ─────────────────────────
// setcookie(name, value, expire, path, domain, secure, httponly)
// Remember the user for 30 days
setcookie(
'user_id', // Name
'abc123', // Value
time() + (86400 * 30), // Expire in 30 days
'/', // Available on all pages
'', // All subdomains
true, // HTTPS only (secure)
true // No JavaScript access (safer)
);
// ── Read a cookie ─────────────────────────
if (isset($_COOKIE['user_id'])) {
$userId = $_COOKIE['user_id'];
echo "Welcome back, user: " . htmlspecialchars($userId);
} else {
echo "First time visitor!";
}
// ── Delete a cookie ───────────────────────
// Set it to expire in the past
setcookie('user_id', '', time() - 3600);
?>// ── Set a cookie (expires in 30 days) ────
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
document.cookie = `${name}=${value}; expires=${d.toUTCString()}; path=/`;
}
// ── Get a cookie by name ─────────────────
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let c of cookies) {
let [k, v] = c.trim().split('=');
if (k === name) return decodeURIComponent(v);
}
return null;
}
// ── Track user interest in cookie ────────
document.querySelectorAll('[data-interest]').forEach(el => {
el.addEventListener('click', () => {
const interest = el.dataset.interest;
setCookie('last_interest', interest, 7);
setCookie('click_count',
(parseInt(getCookie('click_count') || '0') + 1).toString(), 30
);
});
});
// ── Use cookie to personalize the page ───
const lastInterest = getCookie('last_interest');
if (lastInterest) {
document.querySelector('#hero-message').textContent =
`Welcome back! Still interested in ${lastInterest}?`;
}Set this to
PHP তে
Only send the cookie over HTTPS. Never over plain HTTP. Always use this on live sites.
শুধুমাত্র HTTPS এর উপর কুকি পাঠান। সাধারণ HTTP তে নয়। লাইভ সাইটে সবসময় এটি ব্যবহার করুন।
In many countries (like the EU), you must ask users before setting tracking cookies. Always show a consent banner.
অনেক দেশে (যেমন EU) ট্র্যাকিং কুকি সেট করার আগে ব্যবহারকারীর অনুমতি নিতে হবে।
This demo simulates what happens when you track a real user. Click around and watch the data update.
এই ডেমো দেখায় কীভাবে একজন ব্যবহারকারী ট্র্যাক হয়। ক্লিক করুন এবং ডেটা আপডেট দেখুন।
You collect data to understand users better. But you must store it safely and only collect what you need.
ব্যবহারকারীকে আরও ভালো বোঝার জন্য ডেটা সংগ্রহ করা হয়। কিন্তু এটি নিরাপদে সংরক্ষণ করতে হবে এবং শুধু প্রয়োজনীয়টাই সংগ্রহ করতে হবে।
<?php
// Get the raw JSON body sent by JavaScript
$raw = file_get_contents('php://input');
$data = json_decode($raw, true);
if (!$data || !isset($data['event'])) exit;
// Connect to the database
$pdo = new PDO('mysql:host=localhost;dbname=mysite', 'user', 'pass');
// Prepare a safe query (prevents SQL injection)
$stmt = $pdo->prepare("
INSERT INTO user_events
(session_id, event_type, event_data, created_at)
VALUES
(:session, :type, :data, NOW())
");
// Run it with clean values
$stmt->execute([
':session' => session_id(),
':type' => substr($data['event'], 0, 50),
':data' => json_encode($data)
]);
?>Pages visited, time spent, buttons clicked, scroll depth, form data (with consent), device type.
পরিদর্শন করা পেজ, কাটানো সময়, ক্লিক করা বাটন, স্ক্রোল গভীরতা, ফর্ম ডেটা (সম্মতি সহ), ডিভাইস ধরন।
Email, name, location. Always get explicit consent first. Tell users what you collect and why.
ইমেইল, নাম, অবস্থান। সবসময় আগে স্পষ্ট সম্মতি নিন। ব্যবহারকারীদের বলুন আপনি কী এবং কেন সংগ্রহ করছেন।
Passwords in plain text. Card numbers. Data you don't actually need. Data without consent.
প্লেইন টেক্সটে পাসওয়ার্ড। কার্ড নম্বর। অপ্রয়োজনীয় ডেটা। সম্মতি ছাড়া ডেটা।
<?php
// Get all events for this session from the database
$stmt = $pdo->prepare("
SELECT event_type, event_data
FROM user_events
WHERE session_id = :sid
ORDER BY created_at ASC
");
$stmt->execute([':sid' => session_id()]);
$events = $stmt->fetchAll();
// Build a simple interest profile
$profile = [
'total_clicks' => 0,
'max_scroll' => 0,
'interests' => [],
'sections_seen' => [],
];
foreach ($events as $e) {
$d = json_decode($e['event_data'], true);
switch ($e['event_type']) {
case 'click':
$profile['total_clicks']++;
$profile['interests'][] = $d['label'] ?? '';
break;
case 'scroll_depth':
$profile['max_scroll'] = max($profile['max_scroll'], $d['depth'] ?? 0);
break;
case 'section_view':
$profile['sections_seen'][] = $d['id'];
break;
}
}
// Count how many times each interest was clicked
$profile['top_interest'] = array_count_values($profile['interests']);
arsort($profile['top_interest']); // Sort highest first
?>Once you know what users care about, you can show them the right content, send them the right emails, and run better ads.
একবার জানলে ব্যবহারকারীরা কীসে আগ্রহী, আপনি তাদের সঠিক কন্টেন্ট দেখাতে, সঠিক ইমেইল পাঠাতে এবং ভালো বিজ্ঞাপন চালাতে পারবেন।
Your goal: move more people from "Visitor" to "Converted" using the data you collect. আপনার লক্ষ্য: সংগৃহীত ডেটা ব্যবহার করে আরও বেশি মানুষকে "ভিজিটর" থেকে "কনভার্টেড" করা।
Stayed 3+ minutes, scrolled 75%+, clicked pricing. Send them a discount email today.
৩+ মিনিট থেকেছে, ৭৫%+ স্ক্রোল করেছে, প্রাইসিং ক্লিক করেছে। আজই ডিসকাউন্ট ইমেইল পাঠান।
Read multiple pages, scrolled deep. They need more info. Send a case study or guide.
একাধিক পেজ পড়েছে, গভীরে স্ক্রোল করেছে। তাদের আরো তথ্য দরকার। কেস স্টাডি পাঠান।
Bounced quickly. Retarget them with a Google or Facebook ad later.
দ্রুত চলে গেছে। পরে Google বা Facebook বিজ্ঞাপন দিয়ে রিটার্গেট করুন।
Visited before (cookie says so). Show a personalized welcome and a reminder of what they viewed.
আগে এসেছে (কুকি বলে)। ব্যক্তিগতকৃত স্বাগত ও তারা কী দেখেছে তার স্মরণিকা দেখান।
<?php
session_start();
// Read what we know about this user
$visits = intval($_COOKIE['visits'] ?? 0) + 1;
$interest = $_COOKIE['last_interest'] ?? '';
// Save updated visit count
setcookie('visits', $visits, time() + 2592000, '/');
// Choose the right headline for this user
if ($visits === 1) {
$headline = "Welcome! Let us show you around.";
} elseif ($interest === 'pricing') {
$headline = "Ready to get started? Here's our best offer.";
} else {
$headline = "Welcome back! We've saved your progress.";
}
// Choose the right email subject for campaigns
function getEmailSubject($interest, $visits): string {
if ($interest === 'pricing') return "Your exclusive 20% discount — expires tonight";
if ($visits > 3) return "You keep coming back — here's a reward";
return "Still thinking? We can help you decide";
}
?>
<h1><?= htmlspecialchars($headline) ?></h1>Use the tracking script to log clicks, scroll depth, and time spent. Store it in a MySQL database with the user's session ID.ট্র্যাকিং স্ক্রিপ্ট দিয়ে ক্লিক, স্ক্রোল ও সময় লগ করুন। MySQL ডেটাবেজে সেশন ID সহ সংরক্ষণ করুন।
Use PHP to label each user as Hot Lead, Researcher, etc., based on what they did on your page.তারা পেজে কী করেছে তার উপর ভিত্তি করে PHP দিয়ে প্রতিটি ব্যবহারকারীকে হট লিড, গবেষক ইত্যাদি হিসেবে চিহ্নিত করুন।
Change headlines, CTAs, and email content based on the segment. Hot leads get a discount. Researchers get a guide.সেগমেন্টের উপর ভিত্তি করে শিরোনাম, CTA এবং ইমেইল কন্টেন্ট পরিবর্তন করুন।
Export your segments to Google Ads or Facebook Ads to show ads only to people who visited your page but did not convert.আপনার সেগমেন্ট Google Ads বা Facebook Ads এ এক্সপোর্ট করুন। শুধুমাত্র সেই মানুষদের দেখান যারা পেজে এসেছিল কিন্তু কনভার্ট হয়নি।
Track which emails and ads convert the most. Improve the funnel based on real data, not guesses.কোন ইমেইল ও বিজ্ঞাপন সবচেয়ে বেশি কনভার্ট করে ট্র্যাক করুন। অনুমানের উপর নয়, বাস্তব ডেটার উপর ভিত্তি করে ফানেল উন্নত করুন।
Answer these questions to make sure you understood everything. Click an answer to check it.
সবকিছু বুঝেছেন কিনা নিশ্চিত করতে এই প্রশ্নগুলো উত্তর দিন। চেক করতে উত্তরে ক্লিক করুন।
1. What does the
2. Which JavaScript event fires when a user is about to leave the page?ব্যবহারকারী পেজ ছাড়তে গেলে কোন JavaScript ইভেন্ট ফায়ার করে?
3. What does
4. A "Hot Lead" is a user who..."হট লিড" হলো এমন একজন ব্যবহারকারী যে...