All APIs and Global Functions

FigPii has some helper functions available for your use; they're available under the: 

window.FIGPII

This object contains the following helper functions:

track()

<script>
FIGPII.helpers.track(eventType: string, selector: string, eventValue: string)
</script>

Using this function, you can attach trackers to elements on the page without the hassle of having to worry about querySelectorAll, adding forEach, etc. 

How to use the function:

To attach the events supply the eventType — all types supported by addEventListener() are supported — for example "click"

<script>
FIGPII.helpers.track("click", selector: string, eventValue: string)
</script>

Then add the CSS selector for the target element

<script>
FIGPII.helpers.track("click", ".foo", eventValue: string)
</script>

And finally provide the desired value which later on will be used within your AB test

<script>
FIGPII.helpers.track("click", ".foo", "bar")
</script>

Calling this function will attach a click event to any element that has .foo as a class and will fire "bar" to FigPii tracking.

An example of tracking add to cart button on Shopify:

<script>
FIGPII.helpers.track("click", "form[action='/cart/add'] button[type=submit]", "add_to_cart")
</script>

capture.event()

<script>
FIGPII.helpers.capture.event(eventValue: string)
</script>

Using this function, you can send a custom event to FigPii. The event will immediately be transmitted to FigPii so you're responsible to handle the trigger for the event unlike track()

Example:

<script>
FIGPII.helpers.capture.event("some_event")
</script>

capture.revenue()

<script>
FIGPII.helpers.capture.revenue(orderRevenue: float || string)
</script>

Using this function, you can send revenue information from customer orders to FigPii.

The amount of revenue can be a number (float) or a string but it shouldn't contain a currency sign.

An example of tracking revenue on Shopify:

<script>
let revenueFP = "{{ total_price | money_without_currency }}";
revenueFP = revenueFP.replace(',', '');

FIGPII.helpers.capture.revenue(revenueFP)
</script>

waitForElementToDisplay()

<script>
FIGPII.helpers.waitForElementToDisplay(selector: string, callback: function, period: int, maxWaitTime: int)
</script>

You can use this helper function to fire a callback function after an element appears within the DOM. This can help you time your tests to appear as soon as a lazyloaded element appears on the page.

For example you can use the following console.log("foo") after ".bar" element appears on the page — checking every 50ms until a maximum waiting time of 10000ms.

<script>
function foo() {
	console.log("foo")
}

FIGPII.helpers.waitForElementToDisplay(".bar", foo, 50, 10000)
</script>

waitForCondition()

<script>
FIGPII.helpers.waitForCondition(condition: function, callback: function, period: int, maxWaitTime: int)
</script>

Similar to waitForElementToDisplay() this element will wait for a function to return true before calling the callback function.

For example you can use the following console.log("foo") after some_condition is met — checking every 50ms until a maximum waiting time of 10000ms.

<script>
function foo() {
	console.log("foo")
}
function bar() {
	if(some_condition) {
		return true;
	} else {
		return false;
	}
}

FIGPII.helpers.waitForCondition(bar, foo, 50, 10000)
</script>

Load the page with ?FIGPII_DEBUG=1

View FigPii Loading Logs within your console.

FIGPII.recorderManager.getActiveInstances()

FIGPII.experimentManager.getActiveVariations()

FIGPII.experimentManager.getActiveInstances()

await FIGPII.experimentManager.getTargetingResultForExperimentId(experimentId)

By passing an experiment ID to this function you can check if the current page and user is targeted for that test. Mainly useful for SPA sites taking advantage of FIGPII.historyListener.addListener()

Example:

await FIGPII.experimentManager.getTargetingResultForExperimentId(327296)

Possible results:

Not Targeted or Wrong ID = 0

TrackPageView (User was targeted on a previous page but a variation will not be loaded on the current page) = 1

ShowVariation (User is targeted and a variation should be loaded) = 2

FIGPII.historyListener.addListener(function)

This listener will retrigger your function on every page change. Used for SPA websites. 

This is to mitigate for when a user navigates to a targeted page, moves to another page, and then comes back to a targeted page. 

Note: This will trigger on every page change. Use getTargetingResultForExperimentId to determine if your function should make the changes needed, i.e. if the current page the user is viewing is a targeted page.

Example:

function changeHeadlineOnHomePage() {
    FIGPII.experimentManager.getTargetingResultForExperimentId(328443).then((result) => {
        if (result === 2) {
            const headline = document.querySelector('h1')
            headline.innerText = 'variation'
        }
    })
}

FIGPII.historyListener.addListener(changeHeadlineOnHomePage)

Alternatively, you can directly add the check for targeting directly within addListener:

function changeHeadlineOnHomePage() {
	const headline = document.querySelector('h1')
	headline.innerText = 'variation'
}

FIGPII.historyListener.addListener(()=>{
	FIGPII.experimentManager.getTargetingResultForExperimentId(328443).then((result) => {
        if (result === 2) {
            changeHeadlineOnHomePage()
        }
    })
})

await FIGPII.clientInfo.getIp() 

View current IP as detected by FigPii. 

await FIGPII.clientInfo.isMobile() 

Check the device type detected by FigPii, if true then it’s mobile if false then it’s desktop.

FIGPII.experimentManager.setVariationChoice(testId: int, variationId: int) 

Set test variation id from the console.