تجارت الکترونیک پیشرفته برای Tag Manager

این راهنما نحوه پیاده سازی ویژگی های تجارت الکترونیک پیشرفته Universal Analytics را با استفاده از Google Tag Manager در یک وب سایت شرح می دهد.

بررسی اجمالی

Google Analytics Enhanced Ecommerce به شما امکان می‌دهد داده‌های نمایش، تبلیغات و فروش محصول با هر یک از بازدیدها و رویدادهای Google Analytics شما ارسال شود. استفاده از بازدید از صفحه برای ردیابی برداشت محصول و خرید محصول؛ و از رویدادها برای پیگیری مراحل پرداخت و کلیک های محصول استفاده کنید.

قبل از اینکه شروع کنی

توصیه می کنیم بخش انواع داده ها و اقدامات تجارت الکترونیک پیشرفته در راهنمای توسعه یافته توسعه تجارت الکترونیک را مرور کنید تا به شما در برنامه ریزی اجرای خود کمک کند. این راهنما به شما کمک می کند بفهمید کدام فیلدها برای هر یک از تعاملات تجارت الکترونیکی که می خواهید اندازه گیری کنید، مورد نیاز و اختیاری هستند.

فعال کردن تجارت الکترونیک پیشرفته

در بیشتر پیاده‌سازی‌ها، باید Enhanced Ecommerce را در هر یک از نمایش صفحه یا تگ رویداد Universal Analytics خود فعال کنید. شما دو گزینه برای فعال کردن تجارت الکترونیک پیشرفته در صفحه ویرایشگر برچسب رابط وب دارید:

  • پیاده سازی با استفاده از لایه داده (توصیه می شود)
  • با استفاده از یک ماکرو جاوا اسکریپت سفارشی پیاده سازی کنید

اگرچه هر دو روش عملکرد تجارت الکترونیکی معادلی را ارائه می دهند، اما توصیه می کنیم تمام وب سایت هایی که از لایه داده پشتیبانی می کنند از روش لایه داده استفاده کنند. این راهنما روش لایه داده را به عنوان پیش فرض ارائه می دهد، در حالی که استفاده از یک ماکرو جاوا اسکریپت سفارشی در انتهای این راهنما مستند شده است.

با استفاده از لایه داده

بخش های زیر به شما نشان می دهد که چگونه از لایه داده برای اندازه گیری فعالیت های تجارت الکترونیک پیشرفته زیر استفاده کنید:

پاک کردن شی تجارت الکترونیک

توصیه می شود قبل از فشار دادن یک رویداد تجارت الکترونیک به لایه داده، از دستور زیر برای پاک کردن شی تجارت الکترونیک استفاده کنید. پاک کردن شی از تأثیر چندین رویداد تجارت الکترونیک در یک صفحه روی یکدیگر جلوگیری می کند.

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. Checkout Funnel Configuration

به صورت اختیاری، می‌توان به هر مرحله از فرآیند پرداخت شما یک نام توصیفی داد که در گزارش‌ها استفاده می‌شود. برای پیکربندی این نام‌ها، به بخش Admin در رابط وب Google Analytics مراجعه کنید، نمای (نمایه) را انتخاب کنید و روی تنظیمات تجارت الکترونیک کلیک کنید. دستورالعمل‌های راه‌اندازی تجارت الکترونیک را دنبال کنید تا هر مرحله تسویه‌حساب را که می‌خواهید دنبال کنید برچسب بزنید.

راه اندازی تجارت الکترونیک در رابط مدیریت Google Analytics. یک قیف پرداخت با چهار مرحله تعریف شده است: 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

برای اندازه گیری بازپرداخت کامل تراکنش، یک refund actionFieldObject به همراه شناسه تراکنش تراکنش در حال بازپرداخت را فشار دهید:

<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>

استفاده از ماکرو جاوا اسکریپت سفارشی

اگر وب سایت شما از لایه داده پشتیبانی نمی کند، می توانید از یک ماکرو جاوا اسکریپت سفارشی برای فراخوانی تابعی استفاده کنید که شی داده تجارت الکترونیک را برمی گرداند. این شی باید از نحو لایه داده استفاده کند که قبلا در این راهنما نشان داده شده است، به عنوان مثال:

// 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;
}

اگر به جای لایه داده از یک ماکرو جاوا اسکریپت سفارشی استفاده می کنید، Enable Enhanced Ecommerce Features را انتخاب کنید و گزینه Read data from macro را تنظیم کنید.