Integrations for Third-party stores

Settings > Integration

Even tracking

To allow our system to track affiliates' performances on websites that are not built on Shopify (e.g. WordPress, Hydrogen store, Custom headless store, etc.), you need to embed the Third-party tracking code on those pages. This is available from the Free plan.

The new Third-party tracking integration currently does not support Message Bar, Customer Referral, or Facebook Pixel. Please keep this in mind when setting up the integration. We are working on updates and will notify you as soon as these features are supported.

1. Embed UpPromote third-party tracking code on your website

You'll need to obtain UpPromote's third-party tracking code and add it to your third-party site. In order to retrieve it, go to Settings > Integration > Third-party stores > Event tracking > View guide.

Next, choose how you want customers to be redirected when they click on affiliate links:

A. Redirect to Shopify

Redirection tracking

How it works: When customers click on an affiliate link, they will be briefly redirected to Shopify, ensuring accurate tracking and compatibility with Shopify's native checkout.

Steps:

Step 1: Select the Redirect to Shopify option.
Step 2: Enable UpPromote essentials app embeds to allow our tracking script to work on your store.
- If you haven't enabled UpPromote essentials yet, please click the Enable UpPromote essentials button.
- You will be redirected to your Themes editor, where the app embed is already enabled. Ensure that you click Save in the Themes editor to enable UpPromote essentials app embeds successfully.
Step 3: Add tracking code to your third-party website
- Copy the tracking script displayed on UpPromote and insert it inside the <head> tag of your website.
  - If you are using a WordPress website, follow this document to learn how to add the integration code: https://www.ostraining.com/blog/wordpress/custom-js/
  - If you are using other platforms, please ask your developer to add the integration code to allow our script to be loaded.

For example, if your store domain is mystore.myshopify.com, the script should be:

<head>
   <title>T-shirt</title>
   <script async src="https://pixel.uppromote.com/collect/v1/collect?shop=mystore.myshopify.com"></script>
</head>

B. Go straight to the third-party site (Direct checkout)

How it works: Customers will be taken directly to your third-party store without being redirected to Shopify first. This method is best used when you are using direct checkout methods such as "Buy Now" buttons or for cross-site tracking.

Steps:

Step 1: Select the "Go straight to the third-party site" option.
Step 2: Add tracking code to your third-party website
- Depending on your checkout flow preferences, you can choose to add either the "Cart tracking script" or the "Linker tracking script" to your website.
- If your website uses both "Add to cart" and "Buy now" buttons, add both tracking scripts to your website (Use Shopify storefront API).

Cart tracking

This tracking method tracks your customer’s cart and requires your website to send cart data updates to UpPromote Pixel every time the cart changes.

Copy the tracking script displayed on UpPromote and insert it inside the <head> tag of your website.

To integrate the tracking system, your website must send cart update events to UpPromote Pixel whenever the cart changes.
- The cart object must contain a id property.
  - If your website uses React, here is an example of how to trigger cart updates:

 // Here is an example if you build your store with React
export default function CartProvider(props: Props) {
    const [cart, setCart] = useState<any>(null)
    // ... Your cart code logic

    // Listen your cart updated and push the cart_updated event
    // The input need provide the car id in cart object
    // Example: {id: "gid://shopify/Cart/Z2NwLWFzaWEtc291dGh?key=1b7bdec303816", checkoutUrl: "..." }
    useEffect(() => {
        upTag('event', 'cart_updated', cart) // Push cart updated event
    }, [cart]);
}

If your store is custom-built (not using common frameworks) and you handle cart creation manually, you need to trigger the cart update event.
- Here is an example using Shopify's Storefront API client and JavaScript:

// Here is an example if you build your store manually
import { createStorefrontApiClient } from '@shopify/storefront-api-client'
const createCartQuery = `
   mutation cartCreate($input: CartInput) {
      cartCreate(input: $input) {
        cart {
            id
            checkoutUrl
        }
        userErrors {
             field
             message
        }
      }
   }
`
const { data, errors } = await client.request(createCartQuery, {
   variables: {
      attributes: [ { key: "buy_warranty_package", value: "true" } ]
   }
})

if (data.cartCreate.cart) {
   // Push cart updated event
   upTag('event', 'cart_updated', data.cartCreate.cart)
}

Linker tracking

Linker tracking allows UpPromote to maintain user tracking data across multiple domains (e.g., from your website domain to your checkout domain). This prevents loss of tracking cookies when users move between domains by passing identifying information via URL parameters.

Step 1: Copy the tracking script displayed on UpPromote and insert it inside the <head> tag of your website.
- Replace:
  - {your-checkout-domain} with the domain customers use to checkout
  - {domain}.example.com with your website domain
    Only when you use cross-site tracking that you'd need to add this inside the configurations. Otherwise, you can skip this part.
    If you are using another website for tracking (other than Shopify store and your checkout site), you'll need to set up UpPromote Pixel on all non-Shopify stores.

Step 2: Add tracking parameter to the website URL
- Method 1: Automatically Add Linker Parameters to Links
  - UpPromote Pixel will automatically append linker parameters (_upl) to all links (<a> tags) on pages with domains listed in the linker config. This enables tracking to persist as users navigate.
- Method 2: Manually Add Linker Parameters for Custom Navigation
  - If your store uses manual navigation (e.g., JavaScript click handlers), you can add linker parameters manually.
  - Here is an example of navigating users by click to the checkout button:

const checkoutUrl = 'https://{checkout-domain}.myshopify.com/checkouts/cn/Z2NwLWFzaWEtc2'
document.addEventListener('button#checkout-button', function () {
	const destinationUrl = new URL(checkoutUrl)
	const linkerValue = upTag('app', 'linker')

	destinationUrl.searchParams.set('_upl', linkerValue)
	window.location.href = destinationUrl.toString()
})

2. Verify tracking status

Once you’ve completed the setup, it’s crucial to verify that the tracking is working correctly.

Steps to verify tracking:

Test account: Create a test affiliate account using your profile email

If you have already created the test account, skip this step.
If the test account hasn't been created, follow the steps on the screen to generate passwords for that account and complete the test account creation.

Third-party store URL: Input your third-party store URL (e.g., https://yourstore.com).

Run tracking test: After creating test affiliate account and inputting your third-party website, the system will automatically generate affiliate link for you to run tracking test.

Click on the affiliate link provided on the screen.
Check the status to ensure the event is properly tracked.

What to test:

Click event: Ensure that clicks are recorded properly.
Order event: Place an order using your affiliate link and confirm that the order is tracked.

Once the test is successful, the status will indicate that everything is set up and working properly.

3. Edit store URL

In case you want to change the affiliate links to direct to your third-party website, you can edit the Default affiliate link on Settings > Link & coupon > Store URL.

Auto-discount

In order to use Auto-discount on your third-party stores, an extra script is required to be added to the store.

Before you start

You’ve set up Third-party event tracking in UpPromote.
Step 3 (script) is only required if your third-party store uses Redirection/Linker tracking. If you’re not sure, contact us via the in-app live chat or send an email to [email protected].

Step 1: Enable Auto-discount in UpPromote

The first and foremost step to enable Auto-discount in your third-party stores is to set up that feature in the app. If you've already configured Auto-discount rules, you can skip this step.

How to enable Auto-discount:

In UpPromote, go to Programs > click on a program's name to open the Edit program page > scroll down to find the Auto-discount section > click Set up/Manage.
Set up an Auto-discount rule by following this guide.

Step 2: Grant access to cart & checkout

To automatically apply discounts on your third-party site, UpPromote needs permission to access your storefront's cart and checkout. If the permissions are already granted, the status badge will show Active, and you can skip this step.

How to grant access to permissions:

Navigate to Settings > Integration > Third-party stores > Auto-discount > click View guide.

In the Auto-discount for third-party stores page > Grant access to cart and checkout, click Grant access.

Click Update on the permission dialog.

The status changes to Active.

Step 3 — Add script (only for Redirection/Linker tracking)

To enable Auto-discount, your storefront must send a cart update event to UpPromote whenever the cart changes.

This step is required only for stores currently using Redirection/Linker tracking. Skip this step if you're using the Cart tracking method.

What to send

Event: upTag('event', 'cart_updated', cartObject)
cartObject must include the Shopify Cart GID in id, and that id must contain the ?key parameter (the cart key).

Example (React):

// On cart updated
useEffect(() => {
  upTag('event', 'cart_updated', cart);
}, [cart]);

// Example of cart object:
const cart = {
  id: "gid://shopify/Cart/hWN2JfIMsZud4D2KpK6iP01C?key=4f089a78e7a53042dd4d8484e1691d84"
};

Make sure your cart object contains the id and includes the ?key parameter

Verify if it works

Open an affiliate link to your third-party site.
Add an item to cart and proceed to Shopify checkout.
The discount should be auto-applied.

PreviousIntegrations for affiliates NextAPI & Webhook

Last updated 5 days ago

Even tracking

1. Embed UpPromote third-party tracking code on your website

A. Redirect to Shopify

Redirection tracking

B. Go straight to the third-party site (Direct checkout)

Cart tracking

Linker tracking

Method 2: Manually Add Linker Parameters for Custom Navigation

2. Verify tracking status

Steps to verify tracking:

3. Edit store URL

Auto-discount

Before you start

Step 1: Enable Auto-discount in UpPromote

How to enable Auto-discount:

Step 2: Grant access to cart & checkout

How to grant access to permissions:

Step 3 — Add script (only for Redirection/Linker tracking)

What to send

Verify if it works