JS: как создать массив продуктов для Google Analytics dataLayer? - PullRequest
Новая
       23

JS: как создать массив продуктов для Google Analytics dataLayer?

4 голосов
/ 11 мая 2019

Необходим мудрый JavaScript.

Мне нужен способ создания массива продуктов для Google Analytics dataLayer, при использовании Django в качестве бэкэнда и отправке переменной {{ order_items }} в thank_you_page.htmltemplate: 

products: [{
            id: 'product_id',
            name: 'Product A',
            price: '24.00',
            quantity: 1,
            coupon: 'FOR20'
          },{
            id: 'another_product_id',
            name: 'MY ADD-ON',
            price: '1.00',
            quantity: 1,
            coupon: 'ADD-ONS OFF'
          }]

Он будет частью dataLayer, который впоследствии будет использоваться для сбора значений для Google Analytics через Менеджер тегов Google.

Я использую Django для бэкэнда и отправляю эти переменные во внешний интерфейс: 

{{order}}

{{order_items}}

И сказал, что этот массив должен быть внутри другого «родительского» массива, согласно этому сообщению в блоге отa Google Analytics Expert : 

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: [{
            id: 'product_id',
            name: 'Product A',
            price: '24.00',
            quantity: 1,
            coupon: 'FOR20'
          },{
        id: 'another_product_id',
        name: 'MY ADD-ON',
        price: '1.00',
        quantity: 1,
        coupon: 'ADD-ONS OFF'
      }]
    }
  }
});

Должен ли я поставить пустой products = [], а затем выполнить цикл for, чтобы вставить элементы внутрь? 

products = []
{% for item in order_items %}
   products.push({
     id: item.id,
     name: item.name,
     price: item.price,
     quantity: item.quantity,
     coupon: item.coupon
   });
{% endfor %}

ОБНОВЛЕНИЕ 1:

Использование этого кода: 

{% 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: []
            }
        });
    </script>


    {% for item in order_items %}
        <script>
            window.dataLayer.ecommerce.products.push({
                id: item.order.id,
                name: item.name,
                price: item.price,
                quantity: item.quantity
            });
        </script>
    {% endfor %}



{% endblock %}

Ошибка :

Uncaught TypeError: Невозможно прочитать свойство 'products' с неопределенным значением (index): 72

Это строка 72: 

 window.dataLayer.ecommerce.products.push({

Ответы [ 3 ]

0 голосов
/ 14 мая 2019

Вы не можете вставить данные непосредственно в выбранный ключ dataLayer. Вам нужно отправить данные в сам dataLayer: 

dataLayer.push({...});

В вашем конкретном случае также рекомендуется размещать все данные о продукте по запросу на покупку одним нажатием, так как вам нужно обрабатывать их вместе, и таким образом GTM не будет знать, какой продукт был последним, когда массив продуктов считается готовым.

Итак, я предлагаю зациклить продукты и разместить их в виде массива объектов в продуктах, как того требуют расширенные данные электронной торговли: 

{% 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 %}

Также обратите внимание, что эта инициализация обычно используется перед вызовом базового кода GTM: 

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

Принимая во внимание, что событие обычно указывается с последующей передачей данных, чтобы позволить GTM воздействовать на это конкретное событие: 

event: 'eec.purchase'

Использование события в начальном вызове может все еще работать (не проверялось), но оно уже может быть обработано и с событием просмотра страницы.

0 голосов
/ 20 мая 2019

Таким образом, вопрос был о создании массива продуктов (в Javascript) из списка Python (или массива на других языках).

Сложность вопроса заключалась в том, что я (владелец вопроса) нене понимаю, как работать со списком Python в шаблоне для создания массива javascript .

Ответ заключается в том, что вам нужноотправьте python list в шаблон с помощью сериализатора: 

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

В thanks_deposit_payment.html, шаблон, вы должны использовать JSON:

Например: 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 %}
0 голосов
/ 11 мая 2019

Да, я бы сказал, это хорошая практика. Я предполагаю, что order_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: []
  }
});

Затем используйте forEach для добавления товаров в продукты. 

 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
   });
 });
...