# Transaction tag implementation AB Tasty is able to collect transactional data thanks to our transaction tracking (transaction tag). This enables multiple possibilities, analyzing your campaigns through ROI, using the Social Proof Widget with transactional data, segment and target yours visitors based on their transactional behavior... ### Installing the Transaction Tag #### Using the Transaction Tag Generator This is the recommanded way to install the transaction tracking on your website. You will either need to use the dataLayer mode, if the transactional data is available there. The selector mode, or the expert mode which will require someone to code the tracking following a specific format. More information can be found on our [client documentation](https://app.gitbook.com/s/6Yw9IRJ6KbbucQPwZUCZ/account/transaction-tag-integration). **Datalayer Mode** This is the recommanded way. First, you'll need to setup your datalayer in your account settings as explained in this [documentation](https://app.gitbook.com/s/6Yw9IRJ6KbbucQPwZUCZ/account/transaction-tag-integration/how-to-create-a-transaction-tracker-via-datalayer). After you enter your target URL, you can setup your variables. To enter them, you need to find a path to your variable from the datalayer variable defined previously. For instance, if you're using GTM, your default datalayer variable is `dataLayer`. This means we need to find a path to your properties from this variable. For instance let's assume that you have an `ecommerce` property that holds your other variables like the transaction id, then the path will be `ecommerce.transactionId`. Notice that we skip the datalayer variable. For items, the default path is the variable you defined for the items list. For instance `ecommerce.products`, then, each item property will be `name` for the name, etc. **Selector Mode** In this mode, you'll need to find specific CSS selectors that will match the data to send. Beware that we still expect you to follow the types for each of these properties as defined in this [documentation](/web-experimentation-and-personalization/targeting-step.md). **Expert Mode** The expert mode requires someone technical to implement it from the start. The goal is to return an object that will contain all the properties that you want to collect. If you don't want to send a property, as long as it is not a required property, you can remove it from the object. Please be aware that adding this code without any modification won't work. Coding is required. #### Installing it through a TMS or directly in your source code **Source code** If you desire to plug the transaction tracking in your source code directly, you'll need to make sure AB Tasty is loaded and executed before you trigger the transaction tracking. You can do this by waiting for an event to be dispatched on `window` or by looking at `ABTasty.eventState.analyticsLoaded.status`. Here's an example of code you can reuse: ```javascript function removeListeners() { window.removeEventListener('abtasty_trackingInitialized', sendTransaction); document.removeEventListener('abtasty_resetActionTracking', removeListeners); } function sendTransaction() { window.abtasty.send('transaction', { tid: 'OD564', //Transaction ID ta: 'Purchase', //Transaction Affiliation - Name of the transaction goal tr: 15.47, //Transaction Revenue icn: 12, //Number of items // You can add all the data related to your transaction... }); // Remove listener for SPA websites removeListeners(); } if ( window?.ABTasty?.eventState?.trackingInitialized?.status === 'complete' // You might also check if the user is on the purchase confirmation page ) { sendTransaction(); } else { window.addEventListener('abtasty_trackingInitialized', sendTransaction); // Remove listener for SPA websites document.addEventListener('abtasty_resetActionTracking', removeListeners); } ``` **TMS** If you want to install the transaction tracking through a TMS, the idea is similar to installing it into your source code, but you'll need to map the data first to variables that you will be able to reuse in your code. Beware that some TMS will require you to write in ES5 compatible code, this means the code above won't work. Here's one you can reuse: ```javascript function removeListeners() { window.removeEventListener('abtasty_trackingInitialized', sendTransaction); document.removeEventListener('abtasty_resetActionTracking', removeListeners); } function sendTransaction() { window.abtasty.send('transaction', { tid: VARIABLE_FOR_TRANSACTION_ID, //Transaction ID ta: 'Purchase', //Transaction Affiliation - Name of the transaction goal tr: VARIABLE_FOR_TRANSACTION_REVENUE, //Transaction Revenue icn: VARIABLE_FOR_TRANSACTION_ITEM_COUNT, //Number of items // You can add all the data related to your transaction... }); // Remove listener for SPA websites removeListeners(); } if ( typeof window.ABTasty !== 'undefined' && typeof window.ABTasty.eventState !== 'undefined' && window.ABTasty.eventState.trackingInitialized && window.ABTasty.eventState.trackingInitialized.status === 'complete' // You might also check if the user is on the purchase confirmation page ) { sendTransaction(); } else { window.addEventListener('abtasty_trackingInitialized', sendTransaction); // Remove listener for SPA websites document.addEventListener('abtasty_resetActionTracking', removeListeners); } ``` ### Debugging #### Cannot read properties of undefined (reading 'send') If you find this error message, it means you didn't wait for the analytics to be ready before firing the transaction tracking. Please refer to an [earlier part of this documentation](#source-code). #### Data is not sent in the network tab Assuming the code should trigger on the correct page and the code does not contain any error: Either the consent is not given in which case you won't see any ariane hits. Or the data does not to comply to the expected types. You can use the [debug mode](/client-side/tag/tag-debug-module.md) of the tag to help you debug this. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.abtasty.com/client-side/transaction-tag-implementation/transaction-tracking-getting-started.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.