I’m working on a ecommerce site that the client wants to integrate with Affiliatly.com to track orders, etc. This code goes on every page:
Easy enough.
To track orders I used an embed on the order confirmation page, Affiliatly asks for the order number and price data to be made dynamic. Webflow offers price (total) but not the order number. Here’s the workaround I came up with:
It appears that the code to get the orderID from the URL works. But, the dynamic price data I’ve set is not working. On the Affiliatly back end it appears that it’s not tracking any orders. I reached out to Webflow support about the price (total) piece and they directed me here. Any thoughts?
I don’t know if this is possible (or whether it’s even the most efficient way to do it), but is it possible to use some vanilla JS to target the total on the Order Confirmation page by assigning an ID to the total price and use document.getElementById() to get the data you need?
Example:
Assign a unique ID to the total order price via the Webflow Designer. Let’s just say the ID is totalPrice.
Add the following code to your snippet.
var price = document.getElementById('totalPrice').innerText;
Modify your embed code slightly to read: markPurchase('AF-1023779', orderId, price);
I would think that you should be able to get the price data you would need by doing this, but I can’t say for sure without being able to go through the actual order process with a test order.
EDIT: You may need to wrap this in the Webflow.js wrapper to get the data you need, as you may get null or 0 if you don’t:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow API
(ADD CODE HERE)
});
<script>
EDIT 2:
I saw your other post mentioning that Affiliatly requiring that the number be passed to their code without the currency symbol. If you choose to go this route, just add the following line after the var price line:
var rawNum = price.replace(/\$/g,'');
You can pass that into the Affiliatly script instead of the price, as that contains the price without the currency symbol.
@mattvaru! Thanks for the help! This was super close to what I ended up doing. I hit up a backend dev friend who came up with this JS to grab the price and the orderID from the url.
So, until Webflow makes order IDs a dynamic item (if they will at all that is) this is a workaround that did the trick.
<script type="text/javascript">
var urlParams = new URLSearchParams(window.location.search);
var orderId = urlParams.get('orderId')
var total = document.querySelector(".w-commerce-commercecheckoutsummarytotal").innerText
markPurchase('(affiliatly number here)', orderId, total);
</script>
