Sending transactions from the AB Tasty Shopify app directly to Feature Experimentation & Rollouts
Last updated
Was this helpful?
Last updated
Was this helpful?
đĄGood to Know
You must be an AB Tasty customer for both client-side (AB Tasty WE&P) and server-side (FE&R formerly Flagship) features to activate the transaction reporting in your Feature Experimentation & Rollouts workspace (formerly Flagship). You will need your AB Tasty identifier (the ID of your tag) to complete the installation.
For more information on How to install the Shopify app though the Shopify app Store, please refer to this article.
Once the app is installed, you can activate it by clicking on "Enable Extension".
From the theme setting page, you will access the AB Tasty app in the âApp embedsâ panel with both AB Tasty tag (web experimentation activities) settings and FE&R (feature experimentation activities, former Flagship) settings.
AB Tasty identifier: it allows you to insert the AB Tasty tag on the Shopify site. The identifier can be found on this page: https://app2.abtasty.com/settings/installation-code/tag
<script type="text/javascript" src="https://try.abtasty.com/83cb13aabbfc8e8790xxxxxxxxxxxxxx.js"></script>Only the identifier part should be copied, in this example "83cb13aabbfc8e8790xxxxxxxxxxxxxx"
Then paste this value into the dedicated input in the Shopify administration.
If you want to track the transactions for Feature Experimentation and Rollouts activities within the Shopify application, you must:
Check "Enable FE&R"
Fill in the ENV ID of your FE&R account. In Environment > Settings
Copy and paste this Environment ID into the dedicated input in the Shopify application administration.
Youâll find your environment id in the Environment settings page: https://app.flagship.io/env/your_env_id/settings/environment-settings
Given your environment id is âbkabbarggr1dtrcs8gq0â, Environment setting page will be: https://app.flagship.io/env/bkabbarggr1dtrcs8gq0/settings/environment-settings
Several prerequisites are needed on the client-side for transactions to be properly sent to Feature Experimentation and Rollout (FE&R):
1. You must expose the FE&R visitorID on Shopify.
2. Creation of a FE&R campaign
3. Call to the decision API in advance
1. You must expose on Shopify the visitorID of Feature Experimentation and Rollout (FE&R).
We do not know the FE&R visitor ID in question, which is why the client must be able to expose it. You can choose to include it either in cookies or in localStorage. In any case, the key name MUST be FLAGSHIP_VISITOR_ID.
You can expose this key and this visitor ID as you wish. In any case, as soon as a visitor is present on your Shopify site, a cookie (or localStorage) with this key must exist.
2. Creation of a FE&R campaign
To have the transactions related to a campaign, you must create a campaign beforehand.
3. Call to the decision API in advance
However, you must absolutely make a call to the decision API from the launch of the Shopify application so that FE&R can identify the visitorID before any transaction occurs.
Example of a call to the FE&R decision API (here in JS, but you have the choice of language on the FE&R interface):
fetch("https://decision.flagship.io/v2/{{envId}}/campaigns", {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json',
   'x-api-key': '{{yourAPIKey}}'
 },
 body: JSON.stringify({
   visitor_id: "YOUR_VISITOR_ID", // YOUR VISITOR ID YOU PROVIDE
   context: {},
   visitor_consent: true,
   trigger_hit: true,
   decision_group: null
 })
}).then(response => response.json())
.then(data => console.log(data));
This code must then be executed as soon as the FE&R visitorID has been retrieved by the front and must be launched as soon as you arrive on your Shopify site.
Several possibilities for executing this code:
1. You can use the global AB Tasty code (client side) to execute this code. On this page: <https://app2.abtasty.com/settings/global-code>, you can define the execution here.
Here, you will find the example of setting the localStorage and the cookie, and especially, we make the call to the decision API with the visitorID (in this example, the visitorId is that of AB Tasty. NB: this example is false, and you must put your own visitorID - that of FE&R or yours).
2. Nothing obliges you to put this piece of code in the global AB Tasty code. You can of course put this piece of code on your side in the Shopify code as long as this API call is made. You have, for example, the possibility to insert this code in a script tag of a .liquid file. We suggest putting this code at the root of your project to have it executed as quickly as possible.
Providing the FLAGSHIP_VISITOR_ID
As soon as the Shopify site is visited, you must have exposed this key in either localStorage or in cookies.
If this is not the case, then we will not be able to make a call to the decision API, nor send transactions.
Checking that the decision API has been called
You can also check that the call to the decision API has been made. For this, as soon as a visitor is on your site, check in the network tab that a call has indeed been made.
An API call must be made on this URL (method POST):
https://decision.flagship.io/v2/{{envID}}/campaigns
With this payload:
{
 "visitor_id": "YOUR VISITOR ID",
 "context": {},
 "visitor_consent": true,
 "trigger_hit": true,
 "decision_group": null
}In response, you should have at least one campaign in which this visitor is targeted (in the case where all users are included in the campaign).
Checking that a transaction has been sent (network)
Once a transaction has been made, we send a transaction hit to FE&R. You can see this in the network tab.
Checking that a transaction has been received (FE&R)
After a few hours, the transaction will then be available in your FE&R campaign reporting.