Nunca he usado esta tecnología (ni tengo la intención de hacerlo), pero necesito una solución sobre cómo insertar análisis GTM en la página de pago.
Básicamente, ni siquiera sé dónde está el código para pagar.
¿Ayuda por favor?
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'purchase-gtm', 'ecommerce': { 'purchase': { 'actionField': { 'id': '{{checkout.order.id}}', // order number 'revenue': '{{checkout.order.total.value}}', // total transaction value (incl. tax and shipping) 'tax':'{{ecommerce.tax}}', 'shipping': '{{ecommerce.shipping}}' }, 'products': [ {{#each checkout.order.items}} { 'name': '{{name}}', //Product Name 'id': '{{product_id}}', //Product ID 'price': '{{price.value}}', //Product Price 'brand': '{{brand.name}}', //Product Brand 'category': '{{category}}', //Product Category 'quantity': '{{quantity}}', 'variant': '{{sku}}', //Product variant if applicable }, {{/each}} ], } } }); </script>Código como muestra.
Para el tema de la plantilla de Cornerstone, el archivo que desea es templates/pages/checkout.html .
Probablemente desee agregar justo después de la línea:
{{{head.scripts}}}No he verificado todos los valores en su código de muestra, pero ahí es donde debería ir.
De hecho, usamos una solución un poco más completa.
En lugar de colocar el script en la página, actualizamos la compilación para que el script se minimice y podamos usar código compartido.
Así que después de {{{head.scripts}}} tenemos:
<script src="{{cdn 'assets/dist/theme-bundle.checkout.js'}}"></script> Luego en webpack.common.js tenemos:
entry: { main: './assets/js/app.js', head_async: ['lazysizes'], polyfills: './assets/js/polyfills.js', checkout: './assets/js/checkout.js' }, y ponemos nuestro código real en un nuevo archivo /assets/js/checkout.js .
Deberá usar la API de Storefront para recopilar la información adecuada mediante JS fetch . Asegúrese de obtener todos los elementos de línea de su cadena de consulta de inclusión. Solo tenemos productos físicos, así que en el siguiente ejemplo, eso es todo lo que incluimos.
Querrá agrupar todos los elementos de línea en una matriz y luego insertarlos en el evento GTM una vez que haya terminado.
Así es como lo estamos haciendo, que estoy seguro de que puede adaptar para usarlo por su cuenta. Lo mismo se puede hacer en la página de confirmación de pago también.
fetch('/api/storefront/carts?include=lineItems.physicalItems.options',{credentials:'include'}) .then( function(response) { if (response.status !== 200) { console.log('Looks like there was a problem. Status Code: ' + response.status); return; } // Examine the text in the response response.json().then(function(data) { var items = data[0].lineItems.physicalItems; // ==== GA4 Analytics var cartData = { 'event': 'begin_checkout', 'ecommerce': { 'items': [] } } // Insert order items into dataLayer for (var i = 0; i < items.length; i++){ var item = items[i], variant = item.options[0] == undefined ? '' : item.options[0].value, cartItem = { 'item_name': item.name, 'item_id': item.sku, 'price': item.extendedListPrice, 'item_variant': variant, 'quantity': item.quantity } cartData.ecommerce.items.push(cartItem); } dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. dataLayer.push( cartData ); }); } );