"Conversion Pixel," "Conversion Multi-Pixel" or "Pixel" may be used synonymously.
Table of Contents
- Implementing the Conversion Pixel
- Data Mapping
- Email and Phone Hashing
- Confirming Conversion Pixel Placement
- Appendix
Implementing the Conversion Multi-Pixel
The Wunderkind Conversion Pixel reports a conversion event upon successful transaction and passes all required data associated with that transaction. Similar to the SmartTag, the code for the Conversion Multi-Pixel is unique to your website and is included in a .txt file from your Wunderkind contact. There are two components to the Pixel – a JavaScript snippet and a tracking pixel (<img>). Both are required.
Please reference our relevant system-specific integration guides (eg, Shopify, Google Tag Manager, Tealium etc) for more details on how to install the Pixel within that system.
If you do not use Shopify or a tag manager, you may install the Pixel directly in your site HTML. Follow the instructions below.
For Most Websites
On all confirmation pages—anywhere the user is directed after a successful order— insert the JavaScript snippet at the beginning of the document <head> and the tracking pixel at the beginning of the document body.
For Websites using Client-Side MVC Frameworks
Websites that handle page navigation using client-side requests rather than server renders may need to implement the Conversion Multi-Pixel differently. Instead of placing the Conversion Multi-Pixel on a static page, it will need to be loaded when a conversion occurs. This can be accomplished by loading the Conversion Multi-Pixel code whenever a successful conversion occurs.
Common client-side frameworks include AngularJS, Ember, React, and Knockout.
Data Mapping
The Pixel should be set up to send Wunderkind information about the user's order. Replace the placeholder values in your Multi-Pixel text file with code that dynamically produces accurate values for each field.
The table below details what data should be passed for each field. Mapping all fields is recommended; fields marked with an asterisk are required.
Conversion Multi-Pixel Fields for Data Mapping
| Field | Description | Example Output |
| order_id* | Unique transaction identifier. For diagnostics, this should match the value in your analytics platform. | "order_id":"E23KL09720MK" |
| email* | User’s email address, as entered during checkout process | "email":"customer@email.com" |
| phone* | User’s phone number, as entered during checkout process. Please be sure to include plus sign (+) and country code. | "phone":"+12122933612" |
| goal* | The type of conversion event (e.g., “purchase”). Consult with your Wunderkind contact if you have multiple types of conversions. | "goal":"purchase" |
| transaction_origin | The origin of the transaction. Can be used to specify different websites feeding to a single POS, orders completed by the phone or offline, or other sources of sale. |
"transaction_origin":"Online" "transaction_origin":"Store" "transaction_origin":"Phone" |
| currency* | Alphabetic currency code (ISO 4217 standard) of the monetary values (e.g., ‘amount’). Assumes “USD” if omitted. | "currency":"USD" |
| coupon | Array containing coupon code(s) applied to this transaction as strings. Leave array empty if none are applied. |
"coupon":["25OFF"] "coupon":["25OFF","10PERCENTBOOTS"] |
| total_discount | Total value of applied discounts, expressed as a positive number. (Except free shipping, which should be reflected in the shipping field. | "total_discount":"37.20" |
| tax | Tax charge on this transaction. | "tax":"57.32" |
| shipping | Shipping charge on this transaction. | "shipping":"10.99" |
| amount* | Total amount paid. Should equal subtotal + tax + shipping. | "amount":"725.91" |
| pay_method | Type of payment used. Refer to Appendix for list of suggested values. | "pay_method":"CARD" |
| item* | Array of JSON object(s) detailing item(s) in the transaction. Refer to the Item Object Fields below for details. |
"item":[item1] "item":[item1, item2, item3] |
Item Object Fields
| Field | Description | Example |
| sku | SKU of product variant (e.g., blue widget size 7). Must match the item-level identifier in your product feed, if running Catalog emails. | "sku":"E23KL09720MK" |
| product_id | Identifier of product. A product (e.g., widget) represents a set of product variants. | "product_id":"WIDG" |
| price | Unit price of item. | "price":"138.96" |
| quantity | Quantity of this SKU in transaction. | "quantity":"3" |
Notes:
- Monetary values should not include letters, special characters, currency symbols or commas. Values should always use a decimal point (ex: 9.99) regardless of the location, currency, etc.
- The item array is only needed for websites that sell items with a sku, product_id etc. If this is not relevant for your website, you may remove this section from the pixel installation.
- For the “item” field, your engineering team should implement code that dynamically appends a set of values for each item in the transaction until every item is accounted for.
Example Output
The Conversion Pixel should use actual data from each transaction. When properly implemented, one transaction might generate the output below.
Note: Do not cut and paste this information for your own implementation. It is intended for display purposes only. The code you implement should reference the appropriate values from your e-commerce platform.
<script>
window.bouncex = window.bouncex || [];
window.bouncex.push(["conversion", {
"order_id":"E23KL09720MK",
"email":"customer@email.com",
"phone":"+12122933612",
"goal":"purchase",
"transaction_origin":"online",
"currency":”USD",
"coupon":["25OFF", "10PERCENTBOOTS"],
"total_discount":"37.20",
"tax":"57.32",
"shipping":"10.99",
"amount":"725.91",
"pay_method":"CARD",
"item":[
{
"sku":"WIDG_BL_7",
"product_id":"WIDG",
"price":"138.96",
"quantity":"3"
},
{
"sku":”WIDG_BL_5",
"product_id":"WIDG",
"price":"138.96",
"quantity":"2"
}
]
}]);
</script>
<img height=1 width=1 border=0 style="display:none;" src="//api.bounceex change.com/capture/convert2.gif?website_id=9999&order_id=E23KL09720MK&email= customer@email.com&amount=725.91" />
Email and Phone Hashing
In order to utilize email and phone number for identification purposes, they must be passed as plain text. That said, we do support receiving hashed emails and phone numbers. In these cases, we may use the hashes to enhance our cross-device matching, but we cannot use the Pixel for new identifications.
To send hashed email addresses or phone number to Wunderkind via the Conversion Multi-Pixel, follow these instructions:
- Email addresses or phone number must be encrypted via SHA256 hashing algorithm.
- Prior to hashing, addresses must be converted to lowercase and trimmed of whitespace characters.
- In your Conversion Multi-Pixel implementation, label the email address key/value pair “email_sha256” instead of “email" and "phone_sha256" instead of "phone".
- This applies to both the javascript and img portion of the pixel
Example Output - Email and Phone Hashing
<script>
window.top.bouncex = window.top.bouncex || [];
window.top.bouncex.push(["conversion", {
"order_id":”E23KL09720MK",
"email_sha256":"ca751dd14707163a51ef97a0d64fa90f2c503188483e301bcb8304b590e24947",
"phone_sha256" :"3d04f38d945c68d431d009d8d85708aaf8c4bde361f12aa84eaf13715bea0f2c",
"goal":"purchase",
"transaction_origin":"online",
"currency":"USD",
"coupon":["25OFF", "10PERCENTBOOTS"],
"total_discount":"37.20",
"tax":"57.32",
"shipping":"10.99",
"amount":"725.91",
"pay_method":"CARD",
"item":[
{
"sku":"WIDG_BL_7",
"product_id":"WIDG",
"price":”138.96",
"quantity":"5"
]
}]);
</script>
<img height=1 width=1 border=0 style="display:none;" src="//api.bounceexchange.com/capture/convert2.gif?website_id=9999&order_ id=E23KL09720MK&phone_sha256=3d04f38d945c68d431d009d8d85708aaf8c4bde361f12aa84eaf13715bea0f2c&email_sha256=ca751dd14707163a51ef97a0d64fa90f2c503188483e301bcb8304b590e24947&amount=725.91¤cy=USD&goal=purchase" />
Confirming Conversion Pixel Placement
Placing a Test Order
You can validate that the Conversion Pixel is firing correctly by placing a test order and reviewing the browser network tab.
Before placing your order, open up the “Network” tab and check the “Preserve log” checkbox. Then, place your order. When you land on the confirmation page, type “bounce” into the filter box. If everything is working correctly, you should see several events fire:
Events Overview
- “i.js” is the Wunderkind tag
- “convert2.gif” is the image portion of the Conversion Pixel
- “init1.js” is our decisioning engine
- “convert.gif” is the javascript portion of the Conversion Pixel
These 4 events should all fire when the Conversion Pixel is installed correctly.
Data Mapping
To validate that the data elements within the pixel are mapped correctly, click on the “convert.gif” and “convert2.gif” events in the network tab, and then scroll down to “Query String Parameters”. There you should see information about the order such as email, order id, amount, etc.
Troubleshooting Considerations
Wunderkind will work to ensure that orders coming into our system match those in a client's analytics platform. If you're running into issues tracking all orders, consider the following:
Conversion Flows
- How many ways are there to make a conversion on your website?
- Do you use third-party checkout providers like PayPal, Amazon, or Visa? Are they processed differently?
- Is your order flow different for different devices? (e.g. Desktop, Mobile, Tablet)
- Do you treat logged-in versus non logged-in users differently?
- Do you allow users to store information used for conversions?
Confirmation Pages
- Post-conversion, is there more than one page a user can land on depending on their purchase flow?
Other Orders
- Do you record conversions from call centers?
- Do you record conversions from Mobile or Desktop Apps?
- Does your order management system process any additional orders?
ESP and Other Tools
- How do you send transaction data to your ESP?
- Do you send transaction data to any other tools or software on-conversion?
Appendix
Common Payment Methods
| Type | Code |
| Credit/Debit Card | CARD |
| Paypal | PAYPAL |
| Amazon Payments | AZPAY |
Supported Currencies and Codes
| Currency Code | Currency Name |
| USD | US Dollars |
| AED | United Arab Emirates Dirham |
| ARS | Argentine Peso |
| AUD | Australian Dollars |
| BGN | Bulgarian Lev |
| BOB | Bolivian Boliviano |
| BRL | Brazilian Real |
| CAD | Canadian Dollars |
| CHF | Swiss Franc |
| CLP | Chilean Peso |
| CNY | Chinese Yuan |
| COP | Colombian Peso |
| CZK | Czech Koruna |
| DKK | Danish Krone |
| EGP | Egyptian Pound |
| EUR | Euro |
| GBP | British Pound |
| HKD | Hong Kong Dollars |
| HRK | Croatian Kuna |
| HUF | Hungarian Forint |
| IDR | Indonesian Rupiah |
| ILS | Israeli Shekel |
| INR | Indian Rupee |
| JPY | Japanese Yen |
| KRW | South Korean Won |
| LTL | Lithuanian Lita |
| MAD | Moroccan Dirham |
| MXN | Mexican Peso |
| MYR | Malaysian Ringgit |
| NOK | Norwegian Krone |
| NZD | New Zealand Dollars |
| PEN | Peruvian Sol |
| PHP | Philippine Peso |
| PKR | Pakistan Rupee |
| PLN | Polish Zloty |
| RON | New Romanian Leu |
| RSD | Serbian Dinar |
| RUB | Russian Ruble |
| SAR | Saudi Riyal |
| SEK | Swedish Krona |
| SGD | Singapore Dollars |
| THB | Thai Baht |
| TRY | Turkish Lira |
| TWD | New Taiwan Dollar |
| UAH | Ukrainian Hryvnia |
| VEF | Venezuelan Bolívar Soberano |
| VND | Vietnamese Dong |
| ZAR | South African Rand |