vue阿波罗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;
// },
});
}

这似乎很正常，我有一个点击版本的工作很好。问题是，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 };
}

And from mysetup我这样调用:

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。我在手表中添加了result的控制台日志方法，总是undefined。所以我改成了:

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

但是它从来没有被调用过(我猜是因为它没有返回值，而且我没有在模板中使用它)。

我的问题是，做我正在尝试的事情的最好方法是什么?是我遗漏了什么，还是我还在写作轨道上?

Answer 1

我想我很接近了，我只是使用了computed属性来返回我的产品，像这样:

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