ecommerce-data-layer.js

import Vue from "vue";

//use like v-ecommerceDataLayer="obj"
Vue.directive("ecommerceDataLayer", {
  inserted: (
    el,
    binding:
      | {
          value: {
            id: string; //'98872' - Артикул товара, обязательно
            name: string; //'Уголь активированный таб. 0,25г №50' - Название товара
            category: string; // 'Пищеварительная система / Препараты при отравлении'
            brand: string; //'Фармстандарт-Лексредства' - Бренд
            price: string; //'87.5' - Стоимость товара
            list: string; //'Каталог_Популярные_в_категории'
            position: number; //Порядковый номер товара в блоке, использовать нумерацию слева направо, сверху-вниз
          };
        }
      | any
  ) => {
    function productClickBlock() {
      (window as any).dataLayer.push({
        ecommerce: {
          click: {
            actionField: { list: binding.value.list },
            products: [
              {
                id: binding.value.id,
                name: binding.value.name,
                category: binding.value.category,
                brand: binding.value.brand,
                price: binding.value.price
              }
            ]
          }
        },
        event: "productClickBlock"
      });

      el.removeEventListener("click", productClickBlock);
    }

    function impressionsBlockEvent() {
      (window as any).dataLayer.push({
        ecommerce: {
          impressions: [binding.value]
        },
        event: "impressionsBlock"
      });

      //если товар показался то дальше ждем клика по нему
      el.removeEventListener("click", productClickBlock);
      el.addEventListener("click", productClickBlock);
    }

    function handleIntersect(entries: any, observer: any) {
      entries.forEach((entry: any) => {
        if (entry.isIntersecting) {
          impressionsBlockEvent();
          observer.unobserve(el);
        }
      });
    }

    function createObserver() {
      const options: any = {
        root: null,
        threshold: "0"
      };
      const observer = new IntersectionObserver(handleIntersect, options);
      observer.observe(el);
    }

    (window as any).dataLayer = (window as any).dataLayer || [];

    if ((window as any)["IntersectionObserver"]) {
      createObserver();
    } else {
      impressionsBlockEvent();
    }
  }
});

template.html

<template>
        <product
          v-for="(item, position) in getLastViewedProducts.items"
          :key="item.id"
          v-ecommerceDataLayer="{
            id: item.sku,
            name: item.name,
            category: '',
            brand: item.manufacturer_id.label,
            price: item.price.regularPrice.amount.value,
            list: 'товарa_из_вы_недавно_смотрели',
            position: position + 1
          }"
          class="last-viewed-products-slider__product"
          :item="item"
        ></product>
</template>