Seguimiento de píxeles en la página posventa
Si tu tienda ha instalado una aplicación que agrega una página posventa a la pantalla de pago de tu tienda, el seguimiento de píxeles personalizado que utilices en tu tienda podría no capturar ciertos eventos de seguimiento. Los píxeles de seguimiento personalizados que se agregan al cuadro de scripts adicionales hacen un seguimiento de eventos solo en la página de estado del pedido, que viene después de la página posventa en la pantalla de pago. Si un cliente abandona tu tienda en la página posventa, no se hace un seguimiento de ningún evento en la página de estado del pedido.
Para asegurarte de capturar los eventos de conversión correctamente, puedes agregar un script que haga un seguimiento de los eventos en la página posventa. Este script también puede hacer un seguimiento de compras adicionales que se realicen desde la página posventa, como ventas adicionales. Después de agregar un script de página de posventa, debes configurar el script de la página de estado del pedido para que ignore los eventos que el script de la página posventa ya haya capturado.
Debes cambiar la forma en que tu tienda hace un seguimiento de los eventos únicamente si usas un píxel de seguimiento personalizado. Por ejemplo, si configuras Google Analytics a través de Tienda online > Preferencias, los eventos ya se capturan correctamente en tu página posventa.
En esta página
Consideraciones
El script adicional de la página posventa es similar a los scripts adicionales de la página de estado del pedido, pero con algunas diferencias clave:
- El script se agrega a la página posventa, no a la página de estado del pedido.
- El campo solo acepta JavaScript. No se acepta el código Liquid.
- La única etiqueta HTML permitida es
<script>. - El script se ejecuta en un entorno de prueba y no se incluye en la página principal.
- Solo puedes agregar un script de página posventa si tu tienda tiene instalada una aplicación que agrega una página posventa a tu pantalla de pago.
Ejecutar el script dentro de un entorno de prueba garantiza que el script sea seguro y se utilice para su propósito previsto.
El equipo de atención al cliente de Shopify no puede ayudar con los scripts de la página posventa. Si necesitas ayuda, puedes publicar en la Comunidad de Shopify o contratar a un experto de Shopify.
Compatibilidad con scripts en la página de estado del pedido
Para asegurarte de que tus píxeles realicen un seguimiento correcto de todos los eventos de conversión, configura scripts de seguimiento tanto en la página posventa como en la página de estado del pedido. Para evitar tener que contar los eventos de conversión dos veces, puedes usar la variable de Liquid post_purchase_page_accessed en los scripts que se ejecuten en la página de estado del pedido.
Si un cliente llega a la página posventa y luego navega hasta la página de estado del pedido, la variable post_purchase_page_accessed muestra true. Si un cliente no llega a la página posventa, la variable muestra false.
Por ejemplo, puedes usar el siguiente formato para tus scripts en la página de estado del pedido:
{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
// insert your tracking script
</script>
{% endif %}API disponibles
Puedes usar globales de JavaScript para permitir que los scripts de seguimiento accedan a los datos que necesitan. Puedes consultar los datos accesibles en window.Shopify .
Hacer un seguimiento de compras realizadas en la página posventa
Para hacer un seguimiento de compras adicionales que se realicen a través de la página posventa, puedes suscribirte al evento Shopify.on.
Después de suscribirte, ocurre lo siguiente cada vez que se aplica correctamente un changeset posventa:
- Tu controlador se ejecuta con dos parámetros de tipo
Orden:orderyoutdated order. - Los globales en
window.Shopifyse actualizan para que los scripts puedan usar los datos actualizados.
Los controladores suscritos a este evento pueden tener tan solo 500 ms para ejecutarse. Asegúrate de cargar las dependencias que necesites por adelantado.
Agregar el script de la página posventa
- Desde tu panel de control de Shopify, ve a Configuración > Pantalla de pago.
- En el campo Scripts adicionales de posventa, introduce tu script.
- Haz clic en Guardar.
Scripts de ejemplo
Puedes usar la siguiente plantilla de script básico para ayudarte a crear tu propio script de página posventa. Este script de ejemplo usa Google Analytics para hacer un seguimiento de la conversión inicial y explica cómo hacer un seguimiento de compras adicionales. Este ejemplo es muy simple y es probable que tu script final sea distinto.
Archivos de script de ejemplo
Script de ejemplo para la página de estado del pedido:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
// make sure the initial conversion isn't tracked twice
{% if first_time_accessed == false or post_purchase_page_accessed == true %}
return;
{% endif %}
// set up google analytics
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-FYNQ742HTX');
// track initial conversion
var order = window.Shopify.order;
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: order.lineItems.map((item) => ({
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
})),
});
})();
</script>Script de ejemplo para la página posventa:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
// set up google analytics
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-FYNQ742HTX');
// make sure the initial conversion isn't tracked twice
if (!Shopify.wasPostPurchasePageSeen) {
var order = window.Shopify.order;
// track initial conversion
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: order.lineItems.map(function(item) {
return {
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
};
}),
});
}
// set up additional conversion tracking
Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
// identify which items were recently added, if any
var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });
var addedItems = newOrder.lineItems.filter(
function (line) { return oldItems.indexOf(line.id) < 0; }
);
// no new items were added, so we skip conversion tracking
if (addedItems.length === 0) {
return;
}
// track additional purchase
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: addedItems.map(function (item) {
return {
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
};
}),
});
});
})();
</script>Referencias
La siguiente tabla contiene las definiciones de tipo para los atributos que se exponen a los scripts adicionales de posventa a través de window.Shopify:
| Campo | Definición |
|---|---|
| window.Shopify | |
| shop | La información de la tienda desde donde se realizó el pedido. |
| order | La información del pedido. |
| pageUrl | La URL de la página actual. |
| wasPostPurchasePageSeen | Si el cliente visualizó la página posventa durante este pago, se mostrará como falso cuando se procese por primera vez, o como verdadero si la página se vuelve a cargar. |
| on(event: string, handler: function): void | Se suscribe a un evento. Actualmente, solo se admite el evento CheckoutAmended. |
| off(event: string, handler: function): void | Cancela la suscripción del controlador al evento determinado. Actualmente, solo se admite el evento CheckoutAmended. |
| Shop | |
| id | La identificación de la tienda. |
| currency | La moneda de la tienda en formato ISO 4217. Por ejemplo, USD. Para más información, consulta shop.currency. |
| Order | |
| id | El identificador interno del pedido. |
| number | La representación entera del nombre del pedido. Por ejemplo, 1025. |
| checkoutToken | El identificador interno de la pantalla de pago. |
| customer | El cliente asociado al pedido. |
| lineItem | Las líneas de artículo para el pedido. |
| subtotalPrice | El precio subtotal de todos los artículos del pedido después de aplicar los descuentos de línea de artículo y del carrito. El subtotal no incluye impuestos (a menos que los impuestos estén incluidos en los precios), costos de envío o propinas. |
| totalPrice | El precio total del pedido. |
| currency | El código ISO 4217 de la moneda del pedido. |
| discounts | La suma del monto de los descuentos aplicados al pedido. |
| Customer | |
| id | La identificación del cliente. |
| La dirección de correo electrónico del cliente. | |
| acceptsMarketing | Si el cliente había aceptado el marketing. Se mostrará como true si el cliente acepta el marketing y como false si no lo hace. |
| hasAccount | Si el correo electrónico del cliente está asociado con una cuenta de cliente. Se mostrará como true si el correo electrónico aparece en una cuenta de cliente y como false si no es así. Para más información, consulta customer.has_account. |
| firstName | El nombre del cliente. |
| lastName | El apellido del cliente. |
| ordersCount | La cantidad total de pedidos que el cliente ha realizado. |
| totalSpent | El monto total que el cliente gastó en todos los pedidos. |
| LineItem | |
| finalLinePrice | El precio combinado de todos los artículos de la línea de artículos. Esto equivale a line_item.final_price multiplicado por line_item.quantity. |
| finalPrice | El precio de la línea de artículo, incluidos todos los montos de descuento al nivel de línea. |
| lineLevelTotalDiscount | El monto total de todos los descuentos aplicados a la línea de artículo específicamente. Esto no incluye descuentos agregados al carrito. |
| optionsWithValues | Una serie de valores seleccionados de las opciones de producto del artículo. Para más información, consulta line_item.options_with_values. |
| originalLinePrice | El precio combinado de la cantidad de artículos incluidos en la línea, antes de aplicar los descuentos. Esto es igual a line_item.original_price multiplicado por line_item.quantity. |
| originalPrice | El precio original de la línea de artículo antes de aplicar los descuentos. |
| price | El precio unitario de la línea de artículo. El precio refleja cualquier descuento que se aplique a la línea de artículo. Disponible solo para tiendas ubicadas en Alemania o Francia. |
| product | El producto de la línea de artículo. |
| properties | Una variedad de información personalizada para un artículo que se ha agregado al carrito. Para más información, consulta line_item.properties. |
| quantity | La cantidad de la línea de artículo. |
| title | El título de la línea de artículo. Para más información, consulta line_item.title. |
| variant | La variante de la línea de artículo. |
| Product | |
| id | La identificación del producto. |
| type | El tipo de producto. |
| ProductVariant | |
| id | La identificación de la variante. |
| sku | El SKU de la variante. |
| CartDiscount | |
| id | El identificador interno de la aplicación del descuento. |
| code | El código del descuento, si tiene uno. |
| type | El tipo de descuento. Los valores posibles son: automatic, discount_code, manual, and script. |
| amount | El monto total en el que se rebaja el precio de un pedido con el descuento. |