[Django]-JS: how generate the product array for Google Analytics dataLayer?

by

0👍

✅

So the question was about creating the product array (in Javascript) from a Python List (or Array in other languages).

The complexity of the question was because I (the owner of the question) didn’t understand how to work with the python list in the template to generate a javascript array.

The answer is that you need to send the python list to the template using a serializer:

def thanks_deposit_payment(request):
    order_number = Order.objects.latest('id').id

    total = Order.objects.latest('id').total

    costo_despacho = Order.objects.latest('id').shipping_cost

    order_items = OrderItem.objects.filter(order=Order.objects.latest('id'))


    order_items = serialize('json', order_items, fields=['id', 'sku', 'product', 'price', 'size', 'quantity'])

    response = render(request, 'thanks_deposit_payment.html', dict(order_number=order_number, total=total,
                                                                   order_items=order_items, costo_despacho=costo_despacho))
    return response

In thanks_deposit_payment.html, the template, you have to use JSON:

Like this: products: JSON.parse('{{ order_items | safe }}')

{% block data_layer %}

    <script>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'eec.purchase',
            ecommerce: {
                currencyCode: 'PEN',
                purchase: {
                    actionField: {
                        id: {{ order_number }},
                        affiliation: 'Stickers Gallito E-Commerce',
                        revenue: {{ total }},
                        shipping: {{ costo_despacho }},
                        coupon: ''
                    },
                    products: JSON.parse('{{ order_items | safe }}')
                },

            }
        });
    </script>

{% endblock %}
👤Omar Gonzales

0👍

Yes, I would say, this is good practice. I assume, that order_items is an array of items.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'eec.purchase',
  ecommerce: {
    currencyCode: 'EUR',
    purchase: {
      actionField: {
        id: 'ORDER12345',
        affiliation: 'Simo\'s shop',
        revenue: '11.00',
        tax: '1.00',
        shipping: '2.00',
        coupon: 'SUMMER2019'
      }
    },
    products: []
  }
});

Then use forEach to push items into products.

 order_items.forEach(item => {
   window.dataLayer.ecommerce.purchase.products.push({
     id: item.id,
     name: item.name,
     price: item.price,
     quantity: item.quantity,
     coupon: item.coupon
   });
 });
👤Marcel Wagner

0👍

You cannot push data directly into a selected key of the dataLayer. You need to push data to dataLayer itself:

dataLayer.push({...});

For your specific case, it is also a better practice to place all the product data of the purchase call into one push, as you need to process it together, and this way GTM will not know, which was the last product, when the product array is considered ready.

So my suggestion is to loop the products, and place them as array of objects into products, as expected by enhanced ecommerce data:

{% block data_layer %}
    <script>
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            event: 'eec.purchase',
            ecommerce: {
                currencyCode: 'PEN',
                purchase: {
                    actionField: {
                        id: {{ order_number }},
                        affiliation: 'Stickers Gallito E-Commerce',
                        revenue: {{ total }},
                        shipping: {{ costo_despacho }},
                        coupon: 'SUMMER2019'
                    }
                },
                products: [

    {% for item in order_items %}
                  {
                    id: item.order.id,
                    name: item.name,
                    price: item.price,
                    quantity: item.quantity
                  },
    {% endfor %}
                ]
            }
        });
    </script>
{% endblock %}

Also, please note, that this initialization is usually used before calling the GTM base code:

window.dataLayer = window.dataLayer || [];

Whereas event is usually specified with a later data push, to let GTM act on this specific event:

event: 'eec.purchase'

Using event in the initial call might still work (haven’t tested), but it can already be processed with the Page View event as well.

👤kgrg

Leave a comment