تخطّ إلى المحتوى الرئيسي

تتبع التجارة الإلكترونية

تتضمن Joryio SDKs تتبعاً مدمجاً للتجارة الإلكترونية لتفاعل المنتجات ونشاط السلة ومعاملات الشراء. يعمل المتتبع بالطريقة نفسها على كل منصة: الدوال نفسها وأسماء الأحداث القياسية نفسها ودلالات الخصائص نفسها؛ ويختلف فقط بناء اللغة.

اختر منصتك في أي مثال؛ يتزامن الاختيار في الصفحة كلها. للتثبيت والإعداد، راجع Web SDK وiOS SDK وAndroid SDK وReact Native SDK. لا يملك React Native متتبعاً مستقلاً؛ استخدم استدعاءات Joryio.track() المكافئة.

اصطلاح تسمية المعرّفات​

معرّفكالوصفالمثال
productIdمعرّف منتجك، SKU أو معرّف من منصة التجارة"SKU-12345"
orderIdمعرّف طلبك أو رقمه في المنصة"ORD-2024-001"
userIdمعرّف المستخدم، يمرر إلى identify()"user-123"

استخدم معرّفاتك الطبيعية؛ لا تحتاج إلى بادئات خاصة.

تهيئة متتبع التجارة الإلكترونية​

// Get the e-commerce tracker from your SDK instance
const ecommerce = joryio.ecommerce({
  currency: 'USD' // Default currency for all events
});

تتبع مشاهدات المنتجات والبحث​

استخدم viewProduct عند عرض صفحة منتج، وviewCategory عند عرض فئة، وsearch عند البحث. تحمل رؤية المنتج productId وname وprice ويمكنها حمل category وbrand وimageUrl وurl.

ecommerce.viewProduct({
  productId: 'SKU-12345',
  name: 'Classic Blue T-Shirt',
  price: 29.99,
  category: 'Clothing/T-Shirts',
  brand: 'Acme Apparel',
  imageUrl: 'https://example.com/images/blue-tshirt.jpg',
  url: 'https://example.com/products/blue-tshirt'
});
ecommerce.viewCategory('tshirts', 'T-Shirts');
ecommerce.search('blue shirts', 42);

في React Native أرسل الأحداث المكافئة:

Joryio.track('Product Viewed', {
  product_id: 'SKU-12345', name: 'Classic Blue T-Shirt', price: 29.99,
  category: 'Clothing/T-Shirts', brand: 'Acme Apparel',
  image_url: 'https://example.com/images/blue-tshirt.jpg',
  url: 'https://example.com/products/blue-tshirt', currency: 'USD',
});
Joryio.track('Product List Viewed', { category_id: 'tshirts', category_name: 'T-Shirts' });
Joryio.track('Products Searched', { query: 'blue shirts', result_count: 42 });

تتبع نشاط السلة​

استخدم addToCart لإضافة عنصر وremoveFromCart لإزالته وupdateCart لاستبدال السلة كلها. يمرر كل عنصر productId وname وprice وquantity، ويمكن تمرير قيمة السلة الحالية.

ecommerce.addToCart({
  productId: 'SKU-12345', name: 'Classic Blue T-Shirt', price: 29.99,
  quantity: 1, variantId: 'var-medium', sku: 'BTS-001-M'
}, 59.98);
ecommerce.removeFromCart({ productId: 'SKU-12345', name: 'Classic Blue T-Shirt', price: 29.99 }, 1);
ecommerce.updateCart([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97);

في React Native استخدم Product Added وProduct Removed وCart Updated، مع خصائص wire بصيغة snake_case مثل product_id وitem_total وcart_value وcurrency.

تتبع مسار الدفع​

استخدم startCheckout(items, cartValue) عندما يبدأ المستخدم الدفع، وaddPaymentInfo(paymentMethod) عندما يضيف وسيلة الدفع.

ecommerce.startCheckout([
  { productId: 'SKU-12345', name: 'Blue T-Shirt', price: 29.99, quantity: 2 },
  { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
], 109.97);
ecommerce.addPaymentInfo('credit_card');

تكون أحداث React Native المكافئة Checkout Started وPayment Info Entered، مع items وitem_count وvalue وcurrency وpayment_method.

تتبع المشتريات​

استخدم purchase() عند إتمام الطلب. مرّر رقم الطلب وبنود الطلب والقيمة والعملة، ويمكن إضافة الشحن والضريبة والخصم والقسيمة.

ecommerce.purchase({
  orderId: 'ORD-2024-001',
  items: [
    { productId: 'SKU-12345', name: 'Classic Blue T-Shirt', price: 29.99, quantity: 2, category: 'Clothing', brand: 'Acme' },
    { productId: 'SKU-67890', name: 'Black Jeans', price: 49.99, quantity: 1 }
  ],
  value: 109.97, currency: 'USD', shipping: 5.99, tax: 8.80,
  discount: 10.00, coupon: 'SAVE10'
});
يجب تقديم البنود

تتطلب purchase() تمرير بنود الطلب صراحة. لا تخزن SDK حالة السلة في العميل ولا تجلب العناصر تلقائياً من السلة المتتبعة أو الخادم. يضمن ذلك الدقة لأن صفحة أو شاشة تأكيد الطلب تعرف العناصر التي اشتريت بالضبط.

في React Native أرسل Order Completed بالخصائص order_id وitems وitem_count وvalue وcurrency وshipping وtax وdiscount وcoupon.

تتبع تغييرات حالة الطلب​

استخدم الدوال التالية لإرسال تغيير الحالة:

ecommerce.orderFulfilled('ORD-2024-001', '1Z999AA10123456784', 'UPS');
ecommerce.orderDelivered('ORD-2024-001');
ecommerce.orderCancelled('ORD-2024-001', 'Customer requested');
ecommerce.orderRefunded('ORD-2024-001', 29.99, 'Product defective');

تطابقها في React Native الأحداث Order Fulfilled وOrder Delivered وOrder Cancelled وOrder Refunded، مع order_id وtracking_number وcarrier وreason أو refund_amount حسب الحالة.

تتبع قائمة الرغبات والمشاركة​

ecommerce.addToWishlist({ productId: 'SKU-12345', name: 'Classic Blue T-Shirt', price: 29.99 });
ecommerce.shareProduct({ productId: 'SKU-12345', name: 'Classic Blue T-Shirt' }, 'facebook');

تتوفر في iOS وAndroid أيضاً removeFromWishlist وshareProduct. في React Native استخدم Product Added to Wishlist وProduct Removed from Wishlist وProduct Shared بالخصائص product_id وname وprice وcurrency وshare_method.

تتبع القسائم​

ecommerce.applyCoupon('SAVE10', 10.00, 'percentage');
ecommerce.removeCoupon('SAVE10');

في React Native استخدم Coupon Applied مع coupon_code وdiscount_amount وdiscount_type، وCoupon Removed مع coupon_code.

تتبع التقييمات​

ecommerce.submitReview('SKU-12345', 5, 'Great quality shirt!');

في React Native أرسل Product Reviewed بالخصائص product_id وrating وreview_text.

أحداث التجارة الإلكترونية القياسية​

اسم الحدثالوصف
Product Viewedعرض المستخدم صفحة منتج
Product List Viewedعرض المستخدم صفحة فئة
Products Searchedبحث المستخدم عن منتجات
Product Addedإضافة عنصر إلى السلة
Product Removedإزالة عنصر من السلة
Cart Updatedتغير محتويات السلة
Checkout Startedبدأ المستخدم الدفع
Payment Info Enteredأضاف المستخدم وسيلة دفع
Order Completedاكتمل الطلب
Order Fulfilledشُحن الطلب
Order Deliveredسُلّم الطلب
Order Cancelledأُلغي الطلب
Order Refundedاستُرد الطلب
Product Added to Wishlistإضافة المنتج إلى قائمة الرغبات
Product Removed from Wishlistإزالة المنتج من قائمة الرغبات
Product Sharedمشاركة المنتج
Coupon Appliedتطبيق رمز قسيمة
Coupon Removedإزالة رمز قسيمة
Product Reviewedإرسال تقييم منتج

React Native​

لا تتضمن React Native SDK متتبع تجارة إلكترونية مستقلاً. ترسل تطبيقات React Native الأحداث القياسية نفسها تماماً باستدعاء Joryio.track() وبأسماء الأحداث وخصائص wire نفسها التي تطلقها متتبعات SDK الأخرى. تحوّل المتتبعات مدخلات camelCase إلى خصائص أحداث snake_case على السلك؛ وتعرض الأمثلة أعلاه استدعاءات Joryio.track() المكافئة.

الخطوات التالية​