通过谷歌标签管理器或通过PHP自定义像素Woocommerce集成

Posted 2021-04-16

晚上好，我有一个Woocommerce电子商店，我想整合联盟网站的自定义像素代码，以跟踪产品的一些事件，如页面视图，类别视图，购买等等。我们要在我的网站中集成的代码是以下代码和说明：

PageView代码：

<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//www.glami.gr/js/compiled/pt.js', 'glami');

glami('create', '5A5E5996B2A69C196F8C4BC9E7E55F41', 'gr');
glami('track', 'PageView');
</script>

ViewContent（产品）：

glami('track', 'ViewContent', {
content_type: 'product',
item_ids: ['ADZXFLUX002'], // currently viewed product ID. Use the same ID as you use in the feed (ITEM_ID)
product_names: ['Adidas ZX Flux Power Red'] // currently viewed product name. Use the same names as you use in the feed (PRODUCTNAME).
});

ViewContent（类别）：

glami('track', 'ViewContent', {
content_type: 'category',
item_ids: ['ADZXFLUX001', 'NRS02', 'NRS03', 'NRS04', 'NRS05', 'NRS06', 'NRS07', 'NRS08', 'NRS09', 'NRS10'], // currently viewed first 10 product IDs in the category. Use the same IDs as you use in the feed (ITEM_ID).
product_names: ['Adidas ZX Flux Power Red', 'Nike running shorts', ...] // currently viewed first 10 product names. Use the same names as you use in the feed (PRODUCTNAME).
category_id: 'ID_SHOES_001' // currently viewed category ID. Use the same category ID as you use in the feed (CATEGORY_ID)
category_text: 'Men | Shoes | Sneakers' // currently viewed category_text. Use the same category_text as you use in the feed (CATEGORYTEXT)
});

AddToCart

glami('track', 'AddToCart', {
item_ids: ['ADZXFLUX002'], // product ID currently added to a cart. Use the same ID as you use in the feed (ITEM_ID).
product_names: ['Adidas ZX Flux Power Red'], // product name currently added to a cart. Use the same names as you use in the feed (PRODUCTNAME).
value: 2495.00, // product price
currency: 'EUR' // product price currency
});

采购：

glami('track', 'Purchase', {
item_ids: ['ADZXFLUX002', 'NRS01'], // bought product IDs. Use the same IDs as you use in the feed (ITEM_ID).
product_names: ['Adidas ZX Flux Power Red', 'Nike running shorts'], // bought product names. Use the same names as you use in the feed (PRODUCTNAME).
value: 3490.00, // order value
currency: 'EUR', // order value currency
transaction_id: 'ORDER212' // order ID
});

我有兴趣通过Google跟踪代码管理器或通过php在主题php函数文件中集成代码。

答案

你需要使用Hooks。对于大多数代码来说，它非常简单，但是对于添加到购物车来说它更复杂一些。

PageView代码

add_action('wp_footer', 'glami_pageview_code');
function glami_pageview_code(){
?>
    <script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//www.glami.gr/js/compiled/pt.js', 'glami');

glami('create', '5A5E5996B2A69C196F8C4BC9E7E55F41', 'gr');
glami('track', 'PageView');
</script>
<?php
}

ViewContent（产品）

add_action('woocommerce_before_single_product', 'glami_pageview_single_product_code');
function glami_pageview_single_product_code(){
global $product;
$product_id = $product->get_id();
?>
  <script>
glami('track', 'ViewContent', {
content_type: 'product',
item_ids: ['<?php echo $product_id; ?>'], 
product_names: ['<?php echo $product->get_title(); ?>'] 
});
</script>
<?php
}

ViewContent（类别）

同样地，钩子名称是'woocommerce_archive_description'，（如果他们想要列出所有产品ID，那么你将有一些工作）。所以它看起来像这样

add_action('woocommerce_archive_description', 'glami_pageview_product_code');
function glami_pageview_product_cat_code(){ ...

购买......同样的方式，只是不同的钩子

add_action('woocommerce_thankyou', 'glami_purchase_code', 10, 1);
function glami_purchase_code($order_id){
$order = new WC_Order($order_id);
// Use $order object to get all the information you need.