🚧
Your implementation may not use all of the scripts below. See your Technical Implementation Plan for information about which of them are required for your program.

The Universal Tracking Tag (UTT) gives you the most comprehensive tracking information about the consumer journey, direct traffic, conversion paths, etc. The UTT uses first-party cookie tracking technology to build more accurate conversion paths, attribute referrals to your advocates, and enhance our other cookie-less tracking methodologies, as well as expand the levels of data that we can receive and display in reporting.

Your / advocate program has a unique Universal Tracking Tag specific to that program, which gets placed within the global <head> tag of your site. This page has a list of the key scripts you may need when implementing your / advocate program. These are general scripts meant for reference purposes. To generate your personalized code snippets, sign in to the SaaSquatch by impact.com Admin Portal and go to Settings → Install.

☑️
How the UTT is installed

The entire code snippet is copied from this document — this is your UTT:

<<utt>>

If there is no script above, select the Log In button at the top-right of the page, and once signed in, refresh this page.

The snippet is placed within the global <head> </head> HTML element of your site. If you use a a tag manager, add the UTT as a custom HTML tag.

📘
Why does the UTT need to be first?
The UTT is required for the other functions to work. If the UTT doesn't load before it, the integration can break.

Environment setup

Adding a JSON Web Token to the head in your window allows for easier integration of our widget, track conversion, registration, and autofill scripts into individual pages. The impactToken JWT added here will be used for user upsert when a widget loads. It can be placed after the UTT.

<script>
window.impactToken = “o5b236b23632/b326b236236.nb236236326”
</script>

Display a widget

Widgets are participants’ main way to access and use your / advocate program. In addition to showing program information to your participants, widgets create and update user information in our system.

There are two main types of widgets available: instant access, and verified widgets. Both types can be displayed as an embedded widget or a popup widget. Embedded widgets show up directly within your web page or app. Popup widgets are displayed in a modal window. When you use the impact-popup element, any HTML within the children of the element will serve as the CTA for opening the popup.

We recommend consulting the Settings > Install page in the SaaSquatch by impact.com Admin Portal to generate a personalized script for your implementation. The general examples provided below are for informational purposes.

Verified access widgets

Verified access widgets provide a robust, in-app experience for your advocates and their referred friends. To protect your participants’ personal information, we recommend displaying this widget only to those who have signed in to your product.

Note: JWTs are required for verified access widgets.

Embedded widget

<impact-embed widget=”w/referral”><div>Loading...</div></impact-embed>

Popup widget

<impact-popup widget=”w/referral”><button>Click me to show widget</button></impact-popup>

Instant access widgets

Instant access widgets give your participants a simple way to engage with your referral program–without signing into your product or service. JWTs are not required for instant access widgets.

Embedded widget

<impact-embed widget=”w/referral”><div>Loading...</div></impact-embed>

Popup widget

// Click to open
<impact-popup widget=”widget-type”><button>Click me to show widget</button></impact-popup>

Auto popup widget
In addition to the standard embedded and popup widget styles, instant access widgets allow for an automatic pop-up widget to appear whenever the page is loaded. Participants don’t need to interact with your page to trigger a widget load.

Register participants

Use the impact.api method to add or update a participant in your referral program if you aren't displaying a widget. For example, this method can be used to create a new participant in / advocate when someone fills out a registration form.

Note: If you added a JWT during the environment setup, then you don’t need to include one with this script too. If there is an existing token on window.impactToken, then all requests will use that as the default.

<script>
window.impactOnReady = () => {
	impact.api().upsertUser({ ... })
.then(res => {
	console.log("Registered participant:", res.user)
		})
		.catch(e => {
			console.log("Could not register pariticipant:", e)
		})
}
</script>

`trackConversion` function

The trackConversion function is used to track the conversion data report it to SaaSquatch by impact.com.

☑️
How the trackConversion function is installed

Your Technical Integration Plan document contains the function in the Conversion Tracking Tags section.

The snippet's values (pictured in red) are modified with dynamic variables to meet your unique system's needs. All variables are required.

The modified code snippet is added at the top of the HTML element of the order confirmation page of your site, or via a tag manager. This code snippet is added to the top of each HTML element across your site.

`trackConversion` parameter definitions

The table below lists a range of supported parameters that the trackConversion function supports. Parameters should be passed a value from your site using dynamic variables when a conversion occurs.

⚠️
Note
Your Technical Integration Plan specifies which variables you need to pass — refer to that document for details. Do not pass additional variables without first consulting the impact.com Technical Services team.

Parameter	Description	Data Type
`orderId`	Unique order identifier your platform assigns to orders.	`ALPHANUMERIC(64)`
`customerId`	Unique customer identifier your platform assigns to customer accounts. Do not use personally identifiable data for this field. Pass an empty string if unavailable.	`STRING(255)`
`customerEmail`	SHA-1 hash of the customer's email address. This field is required for referral tracking to work properly.	`STRING(255)`
`customerStatus`	Submit values of either New or Existing. Can be configured to alter payouts.	`ALPHANUMERIC(40)`
`currencyCode`	Three-letter ISO 4217 code for the currency of your platform.	`STRING(3)`
`orderPromoCode`	Promotional (or coupon) code applied to the order. Pass an empty string if unavailable.	`STRING(64)`
`orderDiscount`	Total discount amount on the order. This will be subtracted proportionally from the item-level subtotals when revenue values are calculated by impact.com.	`DECIMAL(8,2)`
`subTotal`	SKU set subtotal of the line item (pre-tax, pre-shipping, pre-discount).	`DECIMAL(8,2)`
`category`	Item category identifier. Can be configured to alter payouts.	`STRING(64)`
`sku`	Item stock-keeping unit (SKU) identifier.	`ALPHANUMERIC(40)`
`quantity`	Item quantity.	`INTEGER`
`name`	Item name.	`STRING(128)`

`trackConversion` example payload

See the example payload of a tracked conversion:

<script type="text/javascript">
  ire('trackConversion', ${eventId}, {
    orderId: 1234567,
    customerId: "Customer Id here",
    customerEmail: 'SHA1 Hash of Customer’s Email',
    customerStatus: “New”,
    currencyCode: "USD",
    orderPromoCode: "ACME",
    orderDiscount: 15.00,
    items: [
      {
        subTotal: 28.00,
        category: "Product Category 1",
        sku: "sku-11111",
        quantity: 2,
        name: "Football",
      },
      {
        subTotal: 99.00,
        category: "Product Category 2",
        sku: "sku-11112",
        quantity: 3,
        name: "Men’s Jersey",
      }
    ]
  },
  {
    verifySiteDefinitionMatch:true
  }
  );
</script>

Notes

There are two (2) Footballs being purchased at a unit price of 14.00 which is a SKU set subtotal of 28.00.
There are also three (3) Men’s Jerseys being purchased at a unit price of 33.00 each for a SKU set subtotal of 99.00.
impact.com will take the 15.00 discount passed and apply that proportionately to all items in the purchase.

Autofill referral codes or cookies

The UTT can be used to pick up a referral code from first-party cookies. The library can also use a CSS selector to pick up the cookie itself if one is present in the referred participant’s browser.

Using the code or cookie to prefill a signup form field can reduce the chance of the referral not being attributed or the referred friend not receiving their reward. Autofill can be used during registration and with specific integrations.

Autofill referral codes

<script>
window.impactOnReady = () => {
	impact.autofill("#referral-code")
}
</script>
<input type="hidden" id="referral-code" />

Autofill referral cookies

<script>
window.impactOnReady = () => {
	impact.api().referralCookie().then(res => {
		const input = document.querySelector("#referral-cookie")
		input.value = res.encodedCookie
})
}
</script>
<input type="hidden" id="referral-cookie" />

Learn more

UTT for / advocate programs — Advanced Use Cases

Environment setup

Display a widget

Verified access widgets

Instant access widgets

Register participants

trackConversion function

trackConversion parameter definitions

trackConversion example payload

Autofill referral codes or cookies

Learn more

`trackConversion` function

`trackConversion` parameter definitions

`trackConversion` example payload