Recharge Installation Guide
You can use Delivr.ai Resolution Pixel to track revenue and capture order information from contacts that land on your Recharge page.
Pre-requisites
To add Resolution Pixel in Recharge:
- You need to create a Resolution Pixel. To learn how you can create a Resolution Pixel, see Create a Resolution Pixel | Delivr.
- Have access to the Resolution Pixel Javascript template code snippet. You can find the Javascript template code snippet on Install your Resolution Pixel | Delivr.
- Add your Client ID to the template Javascript code, see Website Script - Client ID to get your Client ID.
Add Resolution Pixel Javascript Code Snippet to Recharge
You can install Resolution Pixel on:
- Recharge Checkout
Install Resolution Pixel on Recharge Checkout
Follow these steps to add the Resolution Pixel Javascript code snippet to Recharge:
- Visit your Recharge Dashboard.
- Go to Storefront → Checkout.
- Scroll down to the Thank you page.
- Add the Resolution Pixel Javascript Code Snippet below any of the existing code.
- Add three more fields in the
const puid = { };
object of the code. The three new fields that you need to add are:order_number: '{{ order_number }}',
order_amount: '{{ total_price }}',
order_email: '{{ order_email }}',
- Click Save.
The new script will look something like this:
<script type="text/javascript">
const clientId = "insert your client id here";
//pid will always be the value below
const pid = '48a021d87720f17403d730658979d7f60e9cec91937e82072c66f611748dd47d';
// Step 2: Create the puid object // Include additional properties as needed for tracking// Step 3: JSON stringify and encode the puid object
// This is necessary for properly formatting the URL
const encodedPuid = encodeURIComponent(JSON.stringify(puid));
// Step 4: Create the pixel URL
const pixelUrl = 'https://a.usbrowserspeed.com/cs?pid=' + pid + '&puid=' + encodedPuid;
// Step 5: Implement the pixel
// You can use an iframe or a script tag method. Here's an example using a script tag:
const script = document.createElement('script');
script.src = pixelUrl;
document.body.appendChild(script);
</script>
Important: If you are using custom revenue tracking variables, you need to insert those variables into the puid section instead of the puid variables shown above.
Once the Resolution Pixel is up and running you can track your order information, revenue, contacts, and ROI from Delivr.ai