Skip to main content

بزن بریم

website

**قبل از شروع، لطفاً ویدئوی زیر را مشاهده کنید تا با روند کلی آشنا شوید.**

استفاده از SDK زبلاین برای وب سایت​

افزودن دامنه به داشبورد زبلاین

برای انجام این کار:

۱. وارد داشبورد زبلاین خود شوید.

۲. به مسیر General > Basics بروید.

۳. در قسمت origin URLs، نام دامنهٔ وب‌سایت خود را در فیلد Domain وارد کنید.

اضافه کردن آدرس اوریجین وب سایت

نصب 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: "TOKEN",

            licence_code: "LICENCE_CODE",

            notificationRequest: false,

          });

        };

      </script>

</body>

</html>

دریافت ACCESS_TOKEN و LICENSE_CODE​

می‌توانید ACCESS_TOKEN و LICENSE_CODE خود را از طریق داشبورد در بخش Credentials دریافت کنید. همچنین، با مراجعه به Setup در داشبورد و کلیک بر روی بلوک HTTP، می‌توانید نمونه درخواست‌های cURL را مشاهده کنید و به‌خصوص از GET Users Endpoint برای دریافت این اطلاعات استفاده کنید.

دستورالعمل‌ها

(این موارد برای تمام نمونه‌کدهای ادغام ارائه‌شده در بالا اعمال می‌شود)

لطفاً مقدار LICENSE_CODE را با کد لایسنس زبلاین خود جایگزین کنید. این کد را می‌توانید در بخش Credentials در داشبورد خود پیدا کنید (همان‌طور که در تصویر زیر نشان داده شده است).

لایسنس کد

(از مسیر زیر نیز میتوانید اسکریپت کامل رو کپی کنید.)

بخش setup

اسکریپت javascript

اسکریپت کامل

نحوه عملکرد SDK

کد ادغام، SDK زبلاین را به‌صورت غیرهمزمان (Asynchronous) بارگذاری و مقداردهی اولیه می‌کند تا بر زمان بارگذاری صفحات وب‌سایت شما تأثیر نگذارد.

در حین مقداردهی اولیه، این کد منتظر وقوع رویداد DOMContentLoaded می‌ماند تا قبل از تغییر DOM و بارگذاری منابع بیشتر، اطمینان حاصل کند که آماده‌سازی DOM به‌تأخیر نمی‌افتد.

URLهای اسکریپت در کد ادغام، وابسته به پروتکل هستند. تمام منابع ما بر اساس همان پروتکل صفحه (HTTP یا HTTPS) بارگذاری می‌شوند تا از هشدارهای "Insecure Content" جلوگیری شود.

چرخه حیات نشست (Session Lifecycle)

SDK زبلاین به‌طور خودکار پس از تنظیمات اولیه، داده‌های کاربران (مانند مرورگر، نسخه سیستم‌عامل، کشور) و تعاملات آن‌ها را ردیابی می‌کند.

علاوه بر این، SDK نشست‌های کاربران را نیز رهگیری می‌کند. هنگامی که کاربر صفحه وب را ترک کند، SDK زمان خروج را علامت‌گذاری می‌کند. اگر کاربر پس از بیش از ۳۰ دقیقه از ترک صفحه، مجدداً بازگردد، نشست قبلی بسته می‌شود. در صورتی که کاربر کمتر از ۳۰ دقیقه پس از خروج بازگردد، نشست قبلی ادامه پیدا می‌کند، به‌گونه‌ای که انگار صفحه را ترک نکرده است.

نکته: این رفتار تنها در صورتی ثبت می‌شود که نشست ادامه‌یافته در همان مرورگر وب باشد (حتی اگر در یک پنجره دیگر باز شود). اگر کاربر از یک مرورگر متفاوت در همان دستگاه بازگردد، SDK زبلاین آن را به‌عنوان یک نشست جدید ثبت می‌کند.

تبریک!

شما با موفقیت زبلاین را با وب‌سایت خود یکپارچه‌سازی کرده‌اید و اکنون در حال ارسال داده‌های نشست کاربر به داشبورد خود هستید.

توجه: نمایش داده‌های شما در داشبورد زبلاین ممکن است چند دقیقه طول بکشد. لطفاً شکیبا باشید.

اگر سؤالی دارید، لطفاً با پشتیبانی زبلاین از طریق support@zebline.com تماس بگیرید یا با مدیر ورود به سیستم خود در ارتباط باشید. ما همیشه از طریق ایمیل در دسترس شما هستیم!

مرحله بعد چیست؟

اکنون بیایید بررسی کنیم که چگونه می‌توانید:

  • ویژگی‌های کاربران را به عنوان User Attributes ردیابی کنید.
  • اقدامات کاربران را به عنوان Events ثبت کنید.
  • اعلان‌های وب (Web Push) را یکپارچه‌سازی کنید.
  • اعلان‌های درون‌سایتی (On-site Notification) را ادغام کنید.