Integrating with npm module

This guide offers an overview of the different ways you can implement the Tapfiliate-js npm module in your frontend application.

This npm module mirrors the Tapfiliate JavaScript integration library and all functions from the Javascript Docs can be used with this wrapper with the only difference that the first parameter is now the function name.

The code examples below are written in React.js but our npm module works for all modern Javascript frameworks.

1. Installation
   With npm:

       npm install @tapfiliate/tapfiliate-js
   

   With yarn:

       yarn add @tapfiliate/tapfiliate-js
   

2. To initialize Tapfiliate on your website you have to call the Tap.init function. This function will initialize your Tapfiliate integration and start scannig the url for tracking parameters to track clicks.

   import Tap from "@tapfiliate/tapfiliate-js";
   Tap.init('((((YOUR ACCOUNT ID))))');
   

   {{{{NO_ACCOUNT_ID_SET_MESSAGE}}}}

3. Whenever a conversion takes place, you will need to signal our platform that this happened. To do so, you can use the Tap.conversion function. This code is usually placed on your thank you page, right after the order has been completed, or the lead data has been collected.

   import { useEffect } from "react";
   import Tap from "@tapfiliate/tapfiliate-js";
   export default function Success() {
   useEffect(() => {
     Tap.conversion('((((Unique Conversion Id))))', '((((Conversion amount))))');
   }, []);
   return <div>Success</div>;
   }
   

• [[[[Unique Conversion Id]]]] is a unique id that should be generated on your end - you need to replace this placeholder text by an actual tag or variable that will automatically inject the respective value on each conversion. It can be anything that is meaningful to you, and unique for each transaction: an order number, transaction number, etc. After a conversion has taken place, you can find this id alongside the conversion on our platform. This makes it very easy to cross-reference data on our platform with your own administration.

• [[[[Conversion Amount]]]] is the total value of the conversion. We use this value to calculate any percentage-based commissions you might have set up for your program. Be aware you also need to replace the placeholder text in the code by the actual tag or variable that passes this data on your website, dinamically injecting a new value on each transaction.

Optional: Lifetime/Recurring commissions

If you are looking to set up lifetime/recurring commissions, you will have to send a customer id when you track a conversion, and send it like so:

  import { useEffect } from "react";
  import Tap from "@tapfiliate/tapfiliate-js";
  export default function Success() {
    useEffect(() => {
      Tap.conversion('((((Unique Conversion Id))))', ((((Conversion amount)))), {customer_id: "((((Customer Id))))" });
    }, []);
    return <div>Success</div>;
  }

• [[[[Unique Conversion Id]]]] see above.
  
• [[[[Conversion Amount]]]] see above.
  
• [[[[Customer Id]]]] is a unique customer id that should be generated on your end - you need to replace this placeholder text by an actual tag or variable that will automatically inject the respective value on each conversion. It can be anything that is meaningful to you and unique for each customer: a user id, an account number, an email address, etc. You can find this customer id alongside the conversion on our platform. This makes it very easy to cross-reference data on our platform with your own administration.
  
  

For more information on how to attach future reccurring commissions via the REST API or Zapier, please refer to our lifetime/recurring commissions guide.

Note: Remember to make sure you have the lifetime/recurring commissions option in your program toggled ON, so that commissions are attributed accordingly.

Optional: Track a sign-up

If you’d only like to track the customer without attaching any conversions just yet, you can track the customer.

Depending on your use case, you may replace customer in the code with the alias that best suits your use case. You may choose from the following: customer, trial, or lead.

  import { useEffect } from "react";
  import Tap from "@tapfiliate/tapfiliate-js";
  export default function Success() {
    useEffect(() => {
      Tap.customer('((((Customer Id))))');
    }, []);
    return <div>Success</div>;
  }

• [[[[Customer Id]]]] see above.
  
  

After you have tracked your customer, future conversions may be attached. Please refer to this guide for further information on how conversions may be attached.

Note: Remember to make sure you have the lifetime/recurring commissions option in your program toggled ON, so that commissions are attributed accordingly.

Advanced tracking

For an overview of additional tracking posibilities, like conversion metadata, using commission types, handling multiple currencies, coupon tracking and more, please check our complete tapfiliate.js reference.

Important

Please remember to test a conversion before starting your program. This way you can verify that tracking has been set up correctly. You can create a test conversion by following the steps described here.