Webflow

The tracking code in the site's Custom code and one line on the Order Confirmation page – no template variables needed.

Time
about 5 min
You need
A paid Webflow site plan (custom code)
View as Markdown

Webflow has no template variables, and the sale doesn't need any: the line on the order confirmation page reads the order number from the page address and the amount from an element on the page.

In Setup, Webflow sits under Other. Choose Other and press Show the Webflow guide.

Before you start

  • A paid Webflow site plan – custom code isn't available on the free plans.
  • Access to the site in the Webflow Designer.
  • Your store ID. The snippets under Program → Setup already have it filled in; on this page it appears as the placeholder DIN_BUTIK.

Step 1: The tracking code on the whole site

Open Site settings → Custom code, paste the script into the Head code field and click Save changes. The affiliate click is then remembered across the whole site.

Site settings → Custom code → Head codeHTML
<script src="https://app.affilyflow.com/t/DIN_BUTIK.js" async></script>

Step 2: The sale on the order confirmation page

  1. Open the Order Confirmation page in the Designer.
  2. Select the text that shows the order subtotal and give it the ID af-total under Element settings → ID.
  3. Paste the line under Page settings → Custom code → Before </body> tag.
Order confirmation → Before </body>HTML
<div hidden data-affilyflow-order="?orderId" data-affilyflow-total="#af-total" data-affilyflow-vat="25"></div>

The order number is read from the orderId parameter in the page address, and the amount from the element with the ID af-total once the page has shown it. The tracking code waits up to 20 seconds for both to appear.

  • data-affilyflow-vat="25" deducts 25 % VAT. Remove it if your prices exclude VAT.
  • Shipping is not part of the subtotal.
  • If you sell in a currency other than Danish kroner, add e.g. data-affilyflow-currency="EUR".

Every attribute is described in The sale line.

Step 3: Publish and test

Click Publish – custom code only goes live once the site is published. Then go to the Test tracking step in Setup, press Open test link, place a test order in the tab that opens, and stay on the page. The live test shows the test click and the purchase with order number and amount, and asks whether the amount is right.

What you seeCause
The console says "data-affilyflow-order must be the order number"The order confirmation address has no orderId.
The console says "data-affilyflow-total must be the amount"No element has the ID af-total, or it showed no amount within 20 seconds.

More in Testing and troubleshooting.

Lead programs

If the program pays per sign-up, don't use the sale line. There are two ways:

  • Automatic lead tracking (recommended). Enter the path of your thank-you page (e.g. /thanks) under Automatic lead tracking in Setup, and copy the tracking code again. It now carries the thank-you page address (data-lead-url) and counts leads by itself – no more code on the thank-you page.
  • Lead script on the thank-you page. If you leave the field empty, Setup shows a small lead script instead. It must only go on the thank-you page (Page settings → Custom code → Before </body> tag) – not in the site-wide footer under Site settings, or leads are counted on every page.

Missing something?

Write to us – we answer quickly, and the page gets fixed.

Contact support