التجارة الإلكترونية المحسَّنة لأداة "إدارة العلامات من Google"

يوضِّح هذا الدليل كيفية تنفيذ ميزات التجارة الإلكترونية المحسَّنة في Universal Analytics باستخدام أداة "إدارة العلامات من Google" على موقع إلكتروني.

نظرة عامة

تتيح التجارة الإلكترونية المحسَّنة في "إحصاءات Google" إمكانية إرسال بيانات مرّات ظهور المنتجات والعروض الترويجية والمبيعات مع أيٍّ من أحداثك ومشاهدات موقعك الإلكتروني في "إحصاءات Google". يمكنك استخدام مرات مشاهدة الصفحة على الويب لتتبُّع مرات ظهور المنتجات وعمليات شراء المنتجات، واستخدام الأحداث لتتبُّع خطوات الدفع والنقرات على المنتجات.

قبل البدء

نقترح مراجعة قسم أنواع بيانات التجارة الإلكترونية المحسَّنة وإجراءاتها ضمن دليل مطوري التجارة الإلكترونية المحسَّنة لمساعدتك في التخطيط لعملية التنفيذ. سيساعدك هذا الدليل على فهم الحقول المطلوبة والاختيارية لكل تفاعل من تفاعلات التجارة الإلكترونية التي تريد قياسها.

تفعيل التجارة الإلكترونية المحسَّنة

في معظم عمليات التنفيذ، يجب تفعيل التجارة الإلكترونية المحسَّنة في كلّ علامة من علامات الأحداث أو مشاهدات الصفحة على الويب في Universal Analytics. لديك خياران لتفعيل التجارة الإلكترونية المحسَّنة في شاشة محرِّر العلامات لواجهة الويب:

  • التنفيذ باستخدام طبقة البيانات (يُنصح به)
  • تنفيذ الإجراء باستخدام ماكرو JavaScript مخصّص

مع أنّ كلتا الطريقتَين توفّران وظيفة تجارة إلكترونية مكافئة، ننصح جميع المواقع الإلكترونية التي تتيح استخدام طبقة بيانات باستخدام طريقة "طبقة البيانات". يعرض هذا الدليل طريقة طبقة البيانات على أنّها الطريقة التلقائية، بينما يتم توثيق استخدام ماكرو JavaScript مخصّص في نهاية هذا الدليل.

استخدام طبقة البيانات

توضّح لك الأقسام التالية كيفية استخدام طبقة البيانات لقياس أنشطة التجارة الإلكترونية المحسَّنة التالية:

محو عنصر التجارة الإلكترونية

ننصحك باستخدام الأمر التالي لمحو كائن التجارة الإلكترونية قبل دفع حدث التجارة الإلكترونية إلى طبقة البيانات. وسيؤدّي محو العنصر إلى منع أحداث التجارة الإلكترونية المتعددة على إحدى الصفحات من التأثير في بعضها.

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

قياس مرات ظهور المنتجات

  • قياس التجارة الإلكترونية: impressions
  • تقبل البيانات: مصفوفة من impressionFieldObjects

يمكنك قياس مرّات ظهور المنتجات باستخدام الإجراء impression وعنصر واحد أو أكثر من impressionFieldObjects. يفترض المثال التالي أن تكون تفاصيل حول المنتجات المعروضة على الصفحة معروفة في وقت تحميل الصفحة:

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

قياس النقرات على المنتجات

  • قياس التجارة الإلكترونية: click
  • تقبل البيانات: list، مصفوفة من productFieldObjects

يمكنك قياس النقرات على روابط المنتجات عن طريق دفع إجراء click إلى طبقة البيانات، بالإضافة إلى productFieldObject لتمثيل المنتج الذي تم النقر عليه، كما في هذا المثال:

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

قياس مشاهدات تفاصيل المنتج

  • قياس التجارة الإلكترونية: detail
  • تقبل البيانات: list، مصفوفة من productFieldObjects

يمكنك قياس عرض تفاصيل المنتج عن طريق دفع إجراء detail إلى طبقة البيانات، إلى جانب عنصر productFieldObjects واحد أو أكثر يمثّل المنتجات التي يتم عرضها:

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

قياس الإضافات أو عمليات الإزالة من سلة التسوق

  • قياس التجارة الإلكترونية: add، remove
  • تقبل البيانات: list، مصفوفة من productFieldObjects

وبالمثل، يمكنك قياس الإضافات أو الإزالة من سلّة التسوّق باستخدام add أو remove actionFieldObject وقائمة productFieldObjects:

إضافة منتج إلى سلة التسوق

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

إزالة منتج من سلة التسوق

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

قياس الإعلانات الترويجية

يمكنك قياس عدد مرّات الظهور وعدد النقرات على الإعلانات الترويجية الداخلية للموقع الإلكتروني، مثل إعلانات البانر المعروضة على الموقع الإلكتروني نفسه التي تُعلِن عن تخفيضات على مجموعة فرعية معيّنة من المنتجات أو عرض للشحن المجاني.

قياس مرات ظهور الإعلان الترويجي

  • قياس التجارة الإلكترونية: promoView
  • تقبل البيانات: مصفوفة من promoFieldObjects

لقياس مرة ظهور عرض ترويجي، اضبط مفتاح promoView في طبقة بيانات التجارة الإلكترونية على promoFieldObject التي تصف العروض الترويجية المعروضة للمستخدمين على الصفحة:

<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

قياس النقرات على العروض الترويجية

لقياس نقرة على عرض ترويجي، ادفع الإجراء promoClick إلى طبقة البيانات باستخدام مصفوفة تحتوي على promoFieldObject يصف العرض الترويجي الذي تم النقر عليه:

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

قياس عملية الدفع

لقياس كل خطوة في عملية الدفع، تحتاج إلى:

  1. يمكنك قياس كل خطوة من خطوات عملية الدفع باستخدام الإجراء checkout.
  2. يمكنك قياس خيارات الدفع باستخدام الإجراء checkout_option، إذا كان ذلك ممكنًا.
  3. يمكنك اختياريًا تحديد أسماء خطوات سهلة الاستخدام لتقرير مسار الدفع من خلال ضبط إعدادات التجارة الإلكترونية في قسم المشرف في واجهة الويب.

1- قياس خطوات الدفع

  • قياس التجارة الإلكترونية: checkout
  • تقبل البيانات: step، مصفوفة من productFieldObjects

لقياس عملية الدفع، التي قد تشمل زر دفع وصفحة دفع واحدة أو أكثر يُدخل فيها المستخدمون معلومات الشحن والدفع، استخدِم الإجراء checkout والحقل step للإشارة إلى المرحلة التي يتم فيها قياس عملية الدفع. يمكنك أيضًا استخدام الحقل option لتقديم بيانات إضافية حول الصفحة، مثل طريقة الدفع التي اختارها المستخدم.

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2. قياس خيارات الدفع

  • قياس التجارة الإلكترونية: checkout_option
  • يقبل البيانات: step، option

يُعدّ خيار الدفع مفيدًا في الحالات التي سبق لك فيها قياس خطوة دفع، ولكنك تريد الحصول على معلومات إضافية حول خطوة الدفع نفسها. على سبيل المثال، طريقة الشحن التي اختارها المستخدم. لقياس هذا، استخدِم الإجراء checkout_option إلى جانب الحقلين step وoption.

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3- إعداد مسار الدفع

يمكنك اختياريًا إضافة اسم وصفي لكل خطوة في عملية الدفع سيتم استخدامها في التقارير. لضبط هذه الأسماء، انتقِل إلى قسم المشرف في واجهة "إحصاءات Google" على الويب، واختَر الملف الشخصي (الملف الشخصي) وانقر على إعدادات التجارة الإلكترونية. اتّبِع تعليمات إعداد التجارة الإلكترونية لتصنيف كل خطوة من خطوات الدفع التي تريد تتبُّعها.

إعداد التجارة الإلكترونية في واجهة مشرف &quot;إحصاءات Google&quot;. يتم تحديد مسار الدفع في أربع خطوات: 1. مراجعة سلة التسوق، 2. جمع معلومات الدفع، 3- تأكيد تفاصيل الشراء، 4- الإيصال
الشكل 1: إعداد التجارة الإلكترونية، مسار الإحالة الناجحة للدفع.

قياس عمليات الشراء

  • قياس التجارة الإلكترونية: purchase
  • البيانات المقبولة: id (معرّف المعاملة)، مصفوفة productFieldObjects

أرسِل تفاصيل المعاملة إلى طبقة البيانات باستخدام الإجراء purchase، بالإضافة إلى علامة event التي ستؤدي إلى إطلاق علامة محسّنة متوافقة مع التجارة الإلكترونية. في هذا المثال، تكون تفاصيل المعاملة معروفة في وقت تحميل الصفحة، وسيتم إرسالها مع مشاهدة صفحة على الويب عندما يعرض النص البرمجي gtm.js:

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

قياس عمليات ردّ الأموال

  • قياس التجارة الإلكترونية: refund
  • البيانات المقبولة: id (معرّف المعاملة)، مصفوفة productFieldObjects

لقياس عملية ردّ الأموال بالكامل لمعاملة معيّنة، أرسِل actionFieldObject refund مع معرِّف المعاملة التي يتم ردّ أموالها:

<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

لقياس عملية ردّ جزء من الأموال، أضِف قائمة productFieldObjects، بما في ذلك معرّفات المنتجات والكميات التي يتم ردّ أموالها:

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

تمرير السمات المخصّصة على مستوى المنتج

لتمرير سمة مخصّصة على مستوى المنتج إلى كائن التجارة الإلكترونية، استخدِم العلامة التالية لإضافتها إلى المنتج:

  dimensionn

حيث يكون n عددًا طبيعيًا، مثل: 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>

تمرير المقاييس المخصَّصة على مستوى المنتج

لتمرير مقياس مخصّص على مستوى المنتج إلى كائن التجارة الإلكترونية، استخدِم العلامة التالية لإضافته إلى المنتج:

  metricn

حيث يكون n عددًا طبيعيًا، مثل: 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>

الجمع بين مرات الظهور والإجراءات

في الحالات التي تتضمّن فيها إجراءات ومرّات ظهور للمنتج، من الممكن دمجها وقياسها في نتيجة واحدة.

يوضّح المثال أدناه كيفية قياس عرض تفاصيل المنتج باستخدام مرّات ظهور المنتج في قسم المنتجات ذات الصلة:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

استخدام ماكرو JavaScript مخصّص

إذا كان موقعك الإلكتروني لا يتيح طبقة بيانات، يمكنك استخدام وحدة ماكرو JavaScript مخصّصة لاستدعاء دالة تعرِض عنصر بيانات التجارة الإلكترونية. ومن المفترض أن يستخدم هذا الكائن بنية طبقة البيانات الموضّحة سابقًا في هذا الدليل، على سبيل المثال:

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

وإذا اختَرت استخدام وحدة ماكرو JavaScript مخصّصة بدلاً من طبقة البيانات، حدِّد تفعيل ميزات التجارة الإلكترونية المحسَّنة واضبط الخيار قراءة البيانات من الماكرو.