Forum
Google Analytics with Perch Shop orders
I'd like to implement Google Analytics' e-commerce tracking on my order completion page with Perch Shop. It seems that they just take a snippet of Javascript on the page, so I had perch_shop_order_items pull a template with the tags injected into their Javascript vars. What I'd like to know is if the solution I did will work, and if this is the cleanest way possible. This is hard to test on a dev copy because it requires so many API moving parts to process an order and the data would get mixed with our live data on Google, so I want to check with someone who understands the system best to see if this is even possible.
My Page:
<?php
perch_layout('global.top', [
'title' => perch_page_title(true),
]);
// Has the order been successfully placed?
if (perch_member_logged_in() && perch_member_has_tag('dealer')) {
// Dealer order success page
perch_content('Dealer Order Successful');
perch_shop_empty_cart();
} elseif (perch_shop_order_successful()) {
// Yes! Show a success message and clear the cart
$email = perch_member_get('email');
$firstname = perch_member_get('first_name');
$lastname = perch_member_get('last_name');
PerchSystem::set_vars([
'email' => $email,
'first_name' => $firstname,
'last_name' => $lastname,
]);
perch_content('Order Successful');
if (perch_member_is_passwordless()) {
perch_member_form('set_password');
}
// Get order info for analytics
perch_shop_order_items(perch_shop_successful_order_id(), array(
'template' => 'shop/orders/analytics.html',
));
perch_shop_empty_cart();
} else {
// Payment problem! Show instructions to the customer
perch_content('Payment Unsuccessful');
}
perch_layout('global.footer');
?>
My Template:
<script>
ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': '<perch:shop id="invoice_number" />',
'revenue': '<perch:shop id="grand_total" />',
});
<perch:orderitems>
ga('ecommerce:addItem', {
'id': '<perch:shop id="invoice_number" />',
'name': '<perch:orderitem id="title" type="hidden" />',
'price': '<perch:orderitem id="price_without_tax" />',
'quantity': '<perch:orderitem id="quantity" type="hidden" />'
});
</perch:orderitems>
ga('ecommerce:send');
</script>
Does the output onto the page look correct?
It looks like with some adjustments I can get the script to output info in the source code, but it isn't being sent to Google. I also am noticing that in order to send multiple items, I need to get the order ID for each item using the shop template snippet, but it doesn't work inside the orderitems repeater because it's out of the scope. How do I get the order ID for each item in orderitems? I've been using this site for reference: https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce
Output:
Do you mean the item ID? The order ID would be the same for every item, giving you duplicate IDs.
The "ID" for the additem function should be the same for all items as the invoice number for the transaction, not the specific item ID. That's how Google connects the items to a certain transaction. I got the system to send the info for the transaction, but because of the scope of the orderitems repeater, I can't figure out a way to get the purchased items to send and pair to the invoice number used above. Is there a way to set a JS variable and then use that inside the function instead?
Have you tried using <perch:shop id="parent.invoice_number" /> within perch:orderitems?
Just a guess and this approach works with categories.
Thanks for chiming in Adam! Unfortunately that doesn't seem to work in that tag set. The following code fills out everything except the invoice number for the item ID fields.
Perhaps <perch:orderitems id="parent.invoice_number" /> might work? Another wild guess I'm afraid but might be worth a try.
No luck :/ I'm not sure what to do... Even setting a global variable with it in JS and then trying to set the other variable in the function to it wasn't working. I just need that one number copied down to the same spot.
Hello Kevin,
Generally when you use
parent.originalIDyou need to also use the attributescope-parenton the outer tag:In case that doesn't work and you don't mind using the order ID instead of the invoice number, I believe
orderIDis available insideperch:orderitems:If none of the above works for you and you must use the invoice number, you might have to call
perch_shop_order()twice:And use
global_invoice_numberin your template:Hussein, you're always a life saver! I had tried shifting the scope earlier to no avail, and was avoiding using the order ID or running another order function for the var, but in the end that's what solved it. Thank you very much for all of your help.