vue apollo 2 合成 api 跟踪结果

Question

因此，我正在尝试按照这篇文章向我的网站添加产品印象：

https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions

我创建了一些逻辑来触发所需的数据，如下所示：

import { getCurrentInstance } from "@vue/composition-api";

import { useGtm } from "@gtm-support/vue2-gtm";

export function useTrackProductImpressions(items: any[]) {
  console.log("trying to track products", items);

  if (!items?.length) return;

  const gtm = useGtm();
  if (!gtm.enabled()) return;
  const dataLayer = window.dataLayer;

  if (!dataLayer) return;

  console.log(items);

  const products = items.map((product, i) => {
    const retailers = product.retailers ?? [];

    return {
      name: product.title, // Name or ID is required.
      id: product.id,
      price: retailers[0].price,
      brand: product.brand,
      category: product.categorySlug,
      variant: product.variant,
      position: i,
    };
  });

  const instance = getCurrentInstance();
  const route = instance.proxy.$route;
  const routeName = route.meta?.title ?? route.name;

  dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
  dataLayer.push({
    event: "productClick",
    ecommerce: {
      click: {
        actionField: { list: routeName }, // Optional list property.
        products,
      },
    },
    // eventCallback: function () {
    //   document.location = productObj.url;
    // },
  });
}

这看起来很正常，我有一个点击版本，效果很好。问题是，单击 link 时可以触发 click 事件，这个事件需要在视图加载时触发，我假设在 setup.

所以，我有我的阿波罗逻辑：

import { useQuery, useResult } from "@vue/apollo-composable";
import * as listProducts from "@graphql/api/query.products.gql";

export const defaultParameters: {
  identifier?: string;
  searchTerm: string;
  itemsToShow: number;
  page: number;
  filters: any;
  facets: string[];
} = {
  searchTerm: "*",
  itemsToShow: 12,
  page: 1,
  filters: [],
  facets: ["Criteria/Attribute,count:100"],
};

export function useSearchProducts(params) {
  const { result, loading, error, fetchMore } = useQuery(listProducts, params);
  const response = useResult(result, null, (data) => data.searchProducts);
  return { response, loading, error, fetchMore };
}

然后从我的设置我这样调用：

const { category } = toRefs(props);
const page = ref(1);
const skip = ref(0);
const orderBy = ref([
  {
    key: "InVenue",
    value: "desc",
  },
]);

const params = computed(() => {
  const filters = createFilters("CategorySlug", [category.value.slug]);
  const request = createRequest(
    defaultParameters,
    page.value,
    filters,
    orderBy.value
  );
  return { search: request };
});

const { response, loading, error} = useSearchProducts(params);

然后我可以 return 这样的模板：

return { response, loading, error };

现在我已经这样做了，我想添加一些跟踪，所以最初我是这样做的：

watch(response, (result) => useTrackProductImpressions(result?.value?.items));

但它总是 undefined。我在 watch 方法中添加了控制台登录 result，它始终是 undefined。所以我改成这样：

const track = computed(() => {
  useTrackProductImpressions(response.value.items);
});

但这永远不会被调用（我假设是因为它没有 return 值而且我没有在模板中使用它）。

我的问题是，哪种方法是执行我正在尝试的操作的最佳方法？我是不是遗漏了什么或者我在写轨道上？

Answer 1

我想我已经很接近了，我只是将计算的属性用于 return 我的产品，如下所示：

const products = computed(() => {
  if (!response.value) return [];
  useTrackProductImpressions(response.value.items);
  return response.value.items;
});

const total = computed(() => {
  if (!response.value) return 0;
  return response.value.total;
});

const hasMoreResults = computed(() => {
  if (!response.value) return false;
  return response.value.hasMoreResults;
});

return {
  products,
  loading,
  error,
  total,
  hasMoreResults,
  skip,
  more,
  search,
};

vue apollo 2 合成 api 跟踪结果

vue apollo 2 composition api track result

vuejs2

google-tag-manager

vue-composition-api

vue-apollo