vue apollo 2 composition api 跟踪结果答案

【问题标题】：vue apollo 2 composition api track resultvue apollo 2 composition api 跟踪结果
【发布时间】：2021-09-01 11:06:26
【问题描述】：

所以我正在尝试按照这篇文章将产品展示添加到我的网站：

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;
    // },
  });
}

这看起来很正常，我有一个可以正常工作的点击版本。问题是，点击链接时可以触发 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 { response, loading, error };

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

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

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

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

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

我的问题是，哪种方法是我正在尝试的最佳方法？我是遗漏了什么还是我在写作轨道上？

【问题讨论】：

标签： vuejs2 google-tag-manager vue-composition-api vue-apollo

【解决方案1】：

我想我已经接近了，我只是使用计算属性返回我的产品，如下所示：

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,
};

【讨论】：