324 lines
13 KiB
TypeScript
324 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { Facebook, Home, Lightbulb, Linkedin, Twitter } from "lucide-react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Blogpost5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const formatPersianDate = (date: Date) =>
|
|
new Intl.DateTimeFormat("fa-IR", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
}).format(date);
|
|
|
|
const Blogpost5 = ({ className }: Blogpost5Props) => {
|
|
const [activeSection, setActiveSection] = useState<string | null>(null);
|
|
const sectionRefs = useRef<Record<string, HTMLElement>>({});
|
|
|
|
useEffect(() => {
|
|
const sections = Object.keys(sectionRefs.current);
|
|
|
|
const observerCallback = (entries: IntersectionObserverEntry[]) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
setActiveSection(entry.target.id);
|
|
}
|
|
});
|
|
};
|
|
|
|
let observer: IntersectionObserver | null = new IntersectionObserver(
|
|
observerCallback,
|
|
{
|
|
root: null,
|
|
rootMargin: "0px",
|
|
threshold: 1,
|
|
},
|
|
);
|
|
|
|
sections.forEach((sectionId) => {
|
|
const element = sectionRefs.current[sectionId];
|
|
if (element) {
|
|
observer?.observe(element);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
observer?.disconnect();
|
|
observer = null;
|
|
};
|
|
}, []);
|
|
|
|
const addSectionRef = (id: string, ref: HTMLElement | null) => {
|
|
if (ref) {
|
|
sectionRefs.current[id] = ref;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/">
|
|
<Home className="h-4 w-4" />
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>وبلاگ</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
<h1 className="mt-9 mb-7 max-w-3xl text-start text-xl font-bold md:mb-10 md:text-2xll">
|
|
چگونه نرخ تبدیل لیدها را ۴۰٪ با سامانه مدیریت ارتباط با مشتری هوشمند افزایش دهید
|
|
</h1>
|
|
<div className="flex flex-wrap items-center gap-3 text-sm md:text-base">
|
|
<Avatar className="h-8 w-8 border">
|
|
<AvatarImage
|
|
src="/block-media/shadcnblocks/block/avatar-2.webp"
|
|
alt="علی رضایی"
|
|
/>
|
|
</Avatar>
|
|
<span>
|
|
<a href="#" className="font-medium">
|
|
علی رضایی
|
|
</a>
|
|
<span className="ms-1 text-muted-foreground">
|
|
در {formatPersianDate(new Date("2024-09-23"))}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="relative mt-12 grid max-w-7xl gap-14 lg:mt-14 lg:grid lg:grid-cols-12 lg:gap-6">
|
|
<div className="order-2 lg:order-none lg:col-span-8 lg:col-start-4">
|
|
<div>
|
|
<img
|
|
src="/block-media/shadcnblocks/block/placeholder-1.svg"
|
|
alt="تصویر شاخص مطلب"
|
|
className="mt-0 mb-8 aspect-video w-full rounded-lg border object-cover"
|
|
/>
|
|
<p className="text-start text-sm text-muted-foreground">
|
|
اتوماسیون بازاریابی به معنای اجرای خودکار جریان‌های ایمیل،
|
|
امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار
|
|
دیجیتال مخاطب است.
|
|
</p>
|
|
</div>
|
|
<section
|
|
id="section1"
|
|
ref={(ref) => addSectionRef("section1", ref)}
|
|
className="my-8 prose dark:prose-invert"
|
|
>
|
|
<h2>راه‌اندازی امتیازدهی لید</h2>
|
|
<p>
|
|
تیم بازاریابی CloudStar با{" "}
|
|
<a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را
|
|
شناسایی کرد.
|
|
</p>
|
|
<blockquote>
|
|
لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود
|
|
کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
|
|
</blockquote>
|
|
<p>
|
|
معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد و لیدهای
|
|
بالای ۳۰ امتیاز به‌صورت خودکار به فروش اختصاص یافتند.
|
|
</p>
|
|
<Alert>
|
|
<Lightbulb className="h-4 w-4" />
|
|
<AlertTitle>نکته عملی</AlertTitle>
|
|
<AlertDescription>
|
|
ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز
|
|
شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</section>
|
|
|
|
<section
|
|
id="section2"
|
|
ref={(ref) => addSectionRef("section2", ref)}
|
|
className="prose mb-8 dark:prose-invert"
|
|
>
|
|
<h2>نتایج کمپین ۹۰ روزه</h2>
|
|
<p>
|
|
پس از اجرای جریان‌های ایمیل و امتیازدهی، تیم فروش شاهد
|
|
بهبود قابل‌توجهی در معیارهای کلیدی بود.
|
|
</p>
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>تعداد لید</th>
|
|
<th>نرخ تبدیل</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>{(120).toLocaleString("fa-IR")}</td>
|
|
<td>{(8).toLocaleString("fa-IR")}٪</td>
|
|
</tr>
|
|
<tr className="m-0 border-t p-0 even:bg-muted">
|
|
<td>{(340).toLocaleString("fa-IR")}</td>
|
|
<td>{(14).toLocaleString("fa-IR")}٪</td>
|
|
</tr>
|
|
<tr className="m-0 border-t p-0 even:bg-muted">
|
|
<td>{(520).toLocaleString("fa-IR")}</td>
|
|
<td>{(22).toLocaleString("fa-IR")}٪</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p>
|
|
لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸
|
|
برابر بیشتر احتمال تبدیل به مشتری داشتند.
|
|
</p>
|
|
</section>
|
|
|
|
<section
|
|
id="section3"
|
|
ref={(ref) => addSectionRef("section3", ref)}
|
|
className="prose mb-8 dark:prose-invert"
|
|
>
|
|
<h2>بهینه‌سازی جریان ایمیل</h2>
|
|
<p>
|
|
تیم بازاریابی با{" "}
|
|
<a href="#">تست A/B موضوع ایمیل</a> نرخ باز شدن را از ۱۸٪
|
|
به ۲۶٪ رساند.
|
|
</p>
|
|
<blockquote>
|
|
ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت
|
|
به ایمیل‌های چندبخشی داشتند.
|
|
</blockquote>
|
|
<p>
|
|
سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
|
|
</p>
|
|
<ul>
|
|
<li>آگاهی: معرفی مشکل و راه‌حل</li>
|
|
<li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
|
|
<li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
|
|
</ul>
|
|
<p>
|
|
زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت
|
|
رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
<div className="order-1 flex h-fit flex-col text-start text-sm lg:sticky lg:top-8 lg:order-none lg:col-span-3 lg:col-start-1 lg:text-xs">
|
|
<div className="order-3 lg:order-none">
|
|
<span className="text-xs font-medium">در این صفحه</span>
|
|
<nav className="mt-2 lg:mt-4">
|
|
<ul className="space-y-1">
|
|
<li>
|
|
<a
|
|
href="#section1"
|
|
className={cn(
|
|
"block py-1 transition-colors duration-200",
|
|
activeSection === "section1"
|
|
? "text-muted-foreground lg:text-primary"
|
|
: "text-muted-foreground hover:text-primary",
|
|
)}
|
|
>
|
|
راه‌اندازی امتیازدهی لید
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#section2"
|
|
className={cn(
|
|
"block py-1 transition-colors duration-200",
|
|
activeSection === "section2"
|
|
? "text-muted-foreground lg:text-primary"
|
|
: "text-muted-foreground hover:text-primary",
|
|
)}
|
|
>
|
|
نتایج کمپین ۹۰ روزه
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#section3"
|
|
className={cn(
|
|
"block py-1 transition-colors duration-200",
|
|
activeSection === "section3"
|
|
? "text-muted-foreground lg:text-primary"
|
|
: "text-muted-foreground hover:text-primary",
|
|
)}
|
|
>
|
|
بهینه‌سازی جریان ایمیل
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<Separator className="order-2 mt-8 mb-11 lg:hidden" />
|
|
<div className="order-1 flex flex-col gap-2 lg:order-none lg:mt-9">
|
|
<p className="font-medium text-muted-foreground">
|
|
اشتراک‌گذاری این مطلب:
|
|
</p>
|
|
<ul className="flex gap-2">
|
|
<li>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
className="group rounded-full"
|
|
asChild
|
|
>
|
|
<a href="#" aria-label="اشتراک در فیسبوک">
|
|
<Facebook className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
|
|
</a>
|
|
</Button>
|
|
</li>
|
|
<li>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
className="group rounded-full"
|
|
asChild
|
|
>
|
|
<a href="#" aria-label="اشتراک در لینکدین">
|
|
<Linkedin className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
|
|
</a>
|
|
</Button>
|
|
</li>
|
|
<li>
|
|
<Button
|
|
variant="secondary"
|
|
size="icon"
|
|
className="group rounded-full"
|
|
asChild
|
|
>
|
|
<a href="#" aria-label="اشتراک در توییتر">
|
|
<Twitter className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
|
|
</a>
|
|
</Button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blogpost5 };
|