index
website
بزن بریم
استفاده از SDK زبلاین برای وب سایت
شما می توانید کلیه دیتاها و تعامل های کاربران خود شامل دیتا و رهگیری کاربران، رهگیری رویداد ها، محصولات و رویدادهای محصولات از SDK زبلاین استفاده کنید.
SDK زبلاین دارای قابلیت های زیر میباشد:
آ- شناسایی، ثبت نام، ورود و خروج کاربران
ب- رهگیری رویداد های ساده و پیچیده کاربران
پ- رهگیری محصولات
ت- رهگیری رویدادهای ساده و پیچیده محصولات
ث- ارسال وب پوش
ج- ارسال پیام درون وب سایت یا In-Site Message
در ادامه به توضیح هر یک از قابلیت های SDK زبلاین میپردازیم.
شناسایی، ثبت نام، ورود و خروج کاربران
در زبلاین به محض اینکه شما پلتفرم های خود را از طریق SDK های ما یکپارچه کنید، شناسایی کاربران آغاز می شود. هر بار که کاربر از وب سایت شما بازدید می کند، SDK زبلاین به طور خودکار یک شناسه منحصر به فرد با کلید anonymousId برای او ایجاد می کند.
مدیریت کاربر به صورت پیش فرض در sdk انجام می شود. هنگامی که شما لاگین نباشید sdk پس از تابع init یک کاربر ناشناس با anonymousId خاص می سازد و رفتار های کاربر شما با شناسه id ساخته شده ذخیره می گردد. برای لاگین کردن کاربر، می بایست در بخش لاگین وب سایت خود همزمان با لاگین موفقیت آمیز کاربر مورد نظر اطلاعات او را به همراه userId یکتایی که در سمت شما برای اون مشخص گردیده است برای زبلاین ارسال کنید.
وقتی یک کاربر از سیستم شما لاگ اوت می کند شما میتوانید با استفاده از آبجکت user این اطلاعات را به سمت پلتفرم زبلاین نیز بفرستید.
لازم به ذکر است که اطلاعات مربوط به بخش لاگین و لاگ اوت کاربر مورد نظر به صورت خودکار در سمت SDK برای زبلاین ارسال می گردد و نیازی به ارسال این دو توسط شما نمی باشد.
اگر در سمت لاگین برای رویداد لاگین نیازمند ارسال دیتای شخصی سازی شده اضافه هستید می توانید در تابع لاگین آنها را به عنوان پارامتر دوم قرار دهید.
رهگیری ویژگی های رویداد ساده و پیچیده
شما در زبلاین می توانید اتربیوت های ایونت های پیچید تر را هم به عنوان انواع داده های Array و Object به زبلاین ارسال کنید. همانطور که در تصویر مشاهده میکنید، می توانید از این داده ها برای شخصی سازی کمپین ها استفاده کنید.
استفاده از سرویس وب پوش و پیام درون برنامه
یکی دیگر از قابلیت های SDK زبلاین، فعال سازی سرویس های وب پوش و پیام درون برنامه ای یا in-site Message میباشد.
نصب SDK
SDK زبلاین شامل دو قطعه اسکریپت و یک فایل service worker با پسوند JS میباشد که با پیاده سازی ان در وبسایت خود میتوانید از قابلیت های مربوط به ان استفاده نمایید. در ادامه میتوانید متن این اسکریپت ها و همچنین لینک دانلود فایل service worker را مشاهده نمایید. اسکریپت اول جهت فراخانی SDK در صفحات وبسایت
1- تنظیم Origin وب سایت
برای پیاده سازی SDK با وب سایت خود ابتدا به داشبورد خود مراجعه کنید و در قسمت General > Origin URL مقدار Origin URL را در لیست به آدرس وب سایت خود تغییر دهید.
2- پیاده سازی SDK در وب سایت
1- قرار دادن اسکریپ اول در تگ head وب سایت
<script defer="defer" src="https://sdk.zebline.io/js/v1/sgm-sdk.js"></script>
برای اپلیکیشن های ووردپرسی و عمومی تکه کد بالا باید در انتهای تگ head آنها و پیش از تگ پایانی در تمام صفحات قرار گیرد.
برای اپلیکیشن های SPA مانند React.js این کد باید در انتهای تگ head در فایل index.html اصلی قرار گیرد.
در اپلیکیشن های SSR مانند Next.js این کد باید در داکیومنت html اصلی و در انتهای تگ head قرار گیرد.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer="defer" src="https://sdk.zebline.io/js/v1/zebline-sdk.js"></script>
</head>
<body>
YOUR BODY CONTENT
</body>
</html>
2- اضافه کردن اسکریپت دوم جهت راه اندازی SDK زبلاین
اسکریپت زیر باید در انتهای تگ body وب سایت قرار گیرد.
<script>
window.onload = function () {
window.zebline.init({
token: "YOUR_ZEBLINE_ACCESS_TOKEN",
licence_code: "YOUR_ZEBLINE_LICENCE_CODE",
notificationRequest: true,
});
};
</script>
برای اپلیکیشن های ووردپرسی و عمومی تکه کد بالا باید در انتهای تگ body آنها و پیش از تگ پایانی در تمام صفحات قرار گیرد.
برای اپلیکیشن های SPA مانند React.js این کد باید در انتهای تگ body در فایل index.html اصلی قرار گیرد.
در اپلیکیشن های SSR مانند Next.js این کد باید در داکیومنت html اصلی و در انتهای تگ body قرار گیرد.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
window.onload = function () {
window.zebline.init({
token: "YOUR_ZEBLINE_ACCESS_TOKEN",
licence_code: "YOUR_ZEBLINE_LICENCE_CODE",
notificationRequest: true,
});
};
</script>
</body>
</html>
اگر SDK زبلاین به درستی در وب سایت راه اندازی شده باشد با فراخوانی تابع زیر در قسمت کنسول مرورگر باید عبارت زیر دیده شود.
تابع:
window.zebline.getVersion();
جواب تابع:
ZEB_SDK ==> 1.2.0
یا ورژن های بالاتر
3- دانلود فایل Service worker برای راه اندازی وب پوش نوتیفیکیشن
فایل سرویس وورکر را از آدرس زیر دانلود کرده و در مسیر اصلی root پروژه خود قرار دهید.
فایل سرویس وورکر باید حتما در مسیر root قرار گیرد به صورتی که پس از آدرس اصلی وب سایت شما با قرار دادن نام آن در url مرورگر بتوان فایل را دید.
https://{YOUR_WEBSITE}/sgmnt-sw.js
مثال:
https://zebline.com/sgmnt-sw.js
اگر نیاز به استفاده از وب پوش بر روی زیر دامنه های خود دارید، می بایست فایل سرویس وورکر را در مسیر اصلی زیر دامنه های وب سایت خود نیز قرار دهید:
https://{YOUR_SUB_DOMAIN}.{YOUR_WEBSITE}/sgmnt-sw.js
مثال:
https://landing.zebline.com/sgmnt-sw.js
پس از طی مراحل بالا SDK کاملا در وب سایت شما نصب و راه اندازی شده است.
پس از پیاده سازی کامل SDK پس از ورود به وبسایت، مودال وب پوش نمایش داده میشود. در صورت allow کردن دریافت وب پوش، یک یوزر جدید در قسمت Leads پنل زبلاین ساخته خواهد شد که توکن وب پوش شما در قسمت attributes موجود است. میتوانید با زدن گزینه Send Web Push یک کمپین وب پوش برای یوزر خود ارسال کرده تا از دریافت ان اطمینان حاصل نمایید.
