Shopify Custom Pixel

Web Pixels
1

Hi, I’m sending dataLayer events via custom pixels, but our store has many discounted products. The dataLayer is only sending the original price and not the discounted value.

How can I include discounted prices? Here is my code;

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-123123');
function extractVariant(title) {
  const variantMatch = title.match(/(\d+\s*gr)/i);
  return variantMatch ? variantMatch[0] : null;
}
function mapLineItems(lineItems) {
  return lineItems.map(item => ({
    item_id: item.variant.product.id,
    item_name: item.variant.product.title,
    item_brand: "123",
    item_category: item.variant.product.type,
    price: item.variant.price.amount,
    quantity: item.quantity
  }));
}
function mapItemList(items) {
  return items.map(item => ({
    item_id: item.id,
    item_name: item.title,
    item_brand: "123",
    item_category: item.type,
    price: item.price.amount
  }));
}
analytics.subscribe("collection_viewed", (event) => {
  const items = mapItemList(event.data?.collection?.products || []);
  dataLayer.push({
    event: "view_item_list",
    url: event.context.document.location.href,
    fired_from:"custom_pixel",
    item_list_name: event.data?.collection?.title,
    ecommerce: {
      items: items
    }
  });
});
analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "shopify_page_view",
    url: event.context.document.location.href,
    fired_from:"custom_pixel"
  });
});
analytics.subscribe("checkout_completed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = mapLineItems(event.data?.checkout?.lineItems);
  const customerInfo = {
    id: "{{ customer.id }}",
    first_name: "{{ customer.first_name }}",
    last_name: "{{ customer.last_name }}",
    full_name: "{{ customer.name }}",
    email: "{{ customer.email }}",
    phone: "{{ customer.default_address.phone }}",
    address: {
      address_summary: "{{ customer.default_address.summary }}",
      address1: "{{ customer.default_address.address1 }}",
      address2: "{{ customer.default_address.address2 }}",
      city: "{{ customer.default_address.city }}",
      street: "{{ customer.default_address.street }}",
      zip_code: "{{ customer.default_address.zip }}",
      company: "{{ customer.default_address.company }}",
      country: "{{ customer.default_address.country.name }}",
      province: "{{ customer.default_address.province }}"
    }
  };
  dataLayer.push({
    event: "purchase",
    email: event.data?.checkout?.email,
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      transaction_id: event.data?.checkout?.order?.id,
      coupon: event.data?.checkout?.discountAllocations,
      shipping: event.data?.checkout?.shippingLine?.price?.amount,
      tax: event.data?.checkout?.totalTax?.amount,
      items: items
    }
  });
});
analytics.subscribe("payment_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = mapLineItems(event.data?.checkout?.lineItems);
  dataLayer.push({
    event: "add_payment_info",
    fired_from:"custom_pixel",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});
analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = mapLineItems(event.data?.checkout?.lineItems);
  dataLayer.push({
    event: "add_shipping_info",
    fired_from:"custom_pixel",
    email: event.data?.checkout?.email,
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});
analytics.subscribe("checkout_started", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = mapLineItems(event.data?.checkout?.lineItems);
  dataLayer.push({
    event: "begin_checkout",
    fired_from:"custom_pixel",
    email: event.data?.checkout?.email,
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.checkout?.currencyCode,
      value: event.data?.checkout?.subtotalPrice?.amount,
      items: items
    }
  });
});
analytics.subscribe("cart_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  const items = event.data?.cart?.lines?.map(item => ({
    item_id: item.merchandise.product.id,
    item_name: item.merchandise.product.title,
    item_brand: "123",
    item_category: item.merchandise.product.type,
    price: item.merchandise.price.amount,
    quantity: item.quantity
  }));
  dataLayer.push({
    event: "view_cart",
    fired_from:"custom_pixel",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.cart?.cost?.totalAmount?.currencyCode,
      value: event.data?.cart?.cost?.totalAmount?.amount,
      items: items
    }
  });
});
analytics.subscribe("product_added_to_cart", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "add_to_cart",
    fired_from:"custom_pixel",
    url: event.context?.document?.location?.href,
    ecommerce: {
      currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
      value: event.data?.cartLine?.cost?.totalAmount?.amount,
      items: [{
        item_id: event.data?.cartLine?.merchandise?.product?.id,
        item_name: event.data?.cartLine?.merchandise?.product?.title,
        item_brand: "123",
        item_category: event.data?.cartLine?.merchandise?.product?.type,
        price: event.data?.cartLine?.merchandise?.price?.amount,
        quantity: event.data?.cartLine?.quantity
      }]
    }
  });
});
analytics.subscribe("product_viewed", (event) => {
  dataLayer.push({ ecommerce: null });
  dataLayer.push({
    event: "view_item",
    fired_from:"custom_pixel",
    url: event.context.document.location.href,
    ecommerce: {
      currency: event.data?.productVariant?.price?.currencyCode,
      value: event.data?.productVariant?.price?.amount,
      items: [{
        item_id: event.data?.productVariant?.product?.id,
        item_name: event.data?.productVariant?.product?.title,
        item_brand: "123",
        item_category: event.data?.productVariant?.product?.type,
        price: event.data?.productVariant?.price?.amount,
        quantity: 1
      }]
    }
  });
});
2

Hey Ercan,

in your mapLineItems() function you are setting the default variant price as the “price” you are later sending to the dataLayer.

From your post I suspect what you want is the price of one unit after all line-level discounts.

You can replace item.variant.price.amount with item.finalLinePrice.amount / item.quantity to achieve this.

function mapLineItems(lineItems) {
  return lineItems.map(item => ({
    item_id: item.variant.product.id,
    item_name: item.variant.product.title,
    item_brand: "123",
    item_category: item.variant.product.type,
    price: item.finalLinePrice.amount / item.quantity,
    quantity: item.quantity
  }));
}

You can also take a look at the Web Pixels API docs for more context.

Hope this helps,

Kevin :hatching_chick: