إعداد حدث شراء

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

قبل البدء

يفترض هذا البرنامج التعليمي أنك أجريت ما يلي:

يفترض الدليل أيضًا أنّ لديك ما يلي:

  • الوصول إلى رمز المصدر الخاص بموقعك الإلكتروني
  • دور المحرِّر (أو دور أعلى) في حساب "إحصاءات Google"

الخطوة 1: إضافة الحدث إلى موقعك الإلكتروني

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

ضَع الحدث في علامة <script> في نهاية العلامة <body>. عند إضافة الحدث في العلامة <script> مباشرةً، يتم تشغيله عند تحميل الصفحة. يصف القسم التالي كيفية تشغيل الحدث عندما ينقر مستخدم على "شراء".

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button>Submit</button>
    <script>
    gtag("event", "purchase", {
        transaction_id: "T_12345_1",
        value: 30.03,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
        // If someone purchases more than one item, 
        // you can add those items to the items array
         {
          item_id: "SKU_12345",
          item_name: "Stan and Friends Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          discount: 2.22,
          index: 0,
          item_brand: "Google",
          item_category: "Apparel",
          item_category2: "Adult",
          item_category3: "Shirts",
          item_category4: "Crew",
          item_category5: "Short sleeve",
          item_list_id: "related_products",
          item_list_name: "Related Products",
          item_variant: "green",
          location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 10.01,
          quantity: 3
        }]
    });
    </script>
</body>
</html>

الخطوة 2: ربط الحدث بأحد الأزرار

يمكنك إعداد حدث purchase ليتم تشغيله بعدّة طرق عندما ينقر المستخدم على الزر "شراء". بإمكانك مثلاً إضافة معرّف إلى الزر "شراء" ثم وضع رمز الحدث في أداة معالجة الحدث. في المثال التالي، لا يتم إرسال الحدث إلا عندما ينقر مستخدم على زر يحمل رقم التعريف purchase.

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_2",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
          });
      });
    </script>
</body>
</html>

الخطوة 3: التأكّد من أنّك تجمع البيانات

يعرِض تقرير DebugView بيانات في الوقت الفعلي من موقعك الإلكتروني، ما يتيح لك التأكّد من إعداد الأحداث بشكل صحيح. لتفعيل وضع تصحيح الأخطاء على صفحة ويب، أضِف معلَمة debug_mode التالية إلى الأمر config:

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID',{ 'debug_mode': true });
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_3",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
        });
    });
    </script>
</body>
</html>

بعد تفعيل وضع تصحيح الأخطاء، ستبدأ برؤية الأحداث وهي تملأ تقرير DebugView أثناء استخدام الأشخاص لموقعك الإلكتروني. على سبيل المثال، يؤدي النقر على الزر "شراء" في موقعك الإلكتروني إلى تعبئة التقرير بالبيانات التالية. يمكنك اختيار حدث للاطّلاع على المَعلمات وخصائص المستخدمين والعناصر المرتبطة بالحدث.

لقطة شاشة لتقرير DebugView

الخطوة 4: الاطّلاع على بيانات التجارة الإلكترونية

بعد 24 ساعة تقريبًا، ستصبح البيانات التي أرسلتها مع حدث "purchase" متوفّرة في التقارير والاستكشافات وGoogle Analytics Data API. يمكنك أيضًا الوصول إلى البيانات في BigQuery عند إعداد BigQuery Export.

يعمل الحدث "purchase" على تعبئة مجموعة متنوعة من السمات والمقاييس المنشأة مسبقًا والتي يتم استخدامها في التقارير والاستكشافات وما إلى ذلك. في ما يلي بعض السمات التي تتم تعبئتها ببيانات من حدث purchase في الخطوة الأولى:

المَعلمة السمة القيمة
affiliation ارتباط السلعة متجر بيع سلع Google
currency العملة USD
discount مبلغ الخصم على السلعة 2.22
index موضع قائمة السلع 0
item_brand العلامة التجارية للسلعة Google
item_category فئة العنصر ملابس
item_id معرّف العنصر SKU_12345
item_list_id رقم تعريف قائمة السلع related_products
item_list_name اسم قائمة السلع المنتجات ذات الصلة
item_name اسم العنصر قميص مُزيَّن بشخصيات كتاب Stan and Friends
item_variant خيار السلعة أخضر
location_id معرّف الموقع الجغرافي للسلعة ChIJIQBpAG2ahYAR_6128GcTUEo (رقم تعريف المكان على Google لسان فرانسيسكو)
shipping مبلغ الشحن يورو
tax مبلغ الضريبة يورو
transaction_id معرِّف المعاملة T_12345

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

  • تبلغ قيمة مقياس أرباح السلع 30.03 دولارًا أمريكيًا.
  • تبلغ قيمة مقياس إجمالي الأرباح 30.03 دولارًا أمريكيًا.
  • قيمة مقياس عمليات الشراء في التجارة الإلكترونية هي 1.

يمكنك استخدام هذه السمات والمقاييس لإنشاء استكشافات وتقارير مخصّصة، ولكن يمكنك أيضًا استخدام تقرير عمليات الشراء في التجارة الإلكترونية التالي المُعدّ مسبقًا للاطّلاع على بيانات التجارة الإلكترونية:

لقطة شاشة لتقرير &quot;عمليات الشراء في التجارة الإلكترونية&quot;