Conversion pixel

Recommended: conversion.js

Adding the conversion script to all your pages lets you automatically track any user conversions.

Setup

Add this script to your page and replace YOUR_ACCOUNT_ID with your actual account Id.

<script>
(function(_, b, e, o, p) {
if (_.beopTag) {
return;
}
_.beopTag = function beopTag() {
beopTag.events.push([].slice.call(arguments));
};
beopTag.events = [];
o = b.createElement(e);
o.src = "https://widget.beop.io/conversion.js";
p = b.querySelector(e);
p.parentNode.insertBefore(o, p);
})(window, document, "script");
beopTag("init", "YOUR_ACCOUNT_ID", {version: 2});
</script>

This little piece of code will load the actual conversion.js tracker asynchronously (meaning it's non blocking for your page) and store any event that was tracked before the actual script is loaded. This way, all the events can be sent to our server as soon as possible and without losing anything.

Tracking a pageview

NOTE: Prior to version 2, the tracking was automatically called. If you pass {version: 2} to the init call and want to track this event, you now need to call the pageview tracking explicitely.

Simply call the beopTag function with the following parameters:

beopTag("track", "pageview");

Tracking a conversion

Call the beopTag function with the following parameters:

beopTag("track", "conversion");

If you want to add additional information, there is a third parameter where you can place what you want, as long as it's a string.

beopTag("track", "conversion", "50");

This can be useful if you want to pass:

  • the price of the cart a user completed
  • the cart product references
  • anything you want, really

Hardcoding campaign & content

Sometimes, the redirect service strips query string params and prevents the conversion pixel from resolving the origin. For these cases, a third parameter can be added to the init:

beopTag(
"init",
"YOUR_ACCOUNT_ID",
{"campaign": "CAMPAIGN_ID", "content": "CONTENT_ID", "publisher": "PUBLISHER_ID"}
);

NOTE: If not provided, these parameters default to what's found in the query string.

Legacy: pixel.js

Setup

Page view

<script async src="https://widget.beop.io/pixel.js" data-beop data-account="YOUR_ACCOUNT_ID" data-campaign="YOUR_CAMPAIGN_ID" data-content="YOUR_CONTENT_ID" data-event="pageview"></script>

Conversion

<script async src="https://widget.beop.io/pixel.js" data-beop data-account="YOUR_ACCOUNT_ID" data-campaign="YOUR_CAMPAIGN_ID" data-content="YOUR_CONTENT_ID" data-event="conversion" data-value="ARBITRARY_VALUE"></script>

Alternatively, if you want to trigger the pixel on a specific user action (like a click)

myPurchaseButton.addEventListener("click", function(event) {
var beopPixel = document.createElement("script");
beopPixel.src = "https://widget.beop.io/pixel.js";
beopPixel.setAttribute("data-beop", "");
beopPixel.setAttribute("data-account", "YOUR_ACCOUNT_ID");
beopPixel.setAttribute("data-campaign", "YOUR_CAMPAIGN_ID");
beopPixel.setAttribute("data-content", "YOUR_CONTENT_ID");
beopPixel.setAttribute("data-event", "conversion");
beopPixel.setAttribute("data-value", "ARBITRARY_VALUE");
var firstScript = document.querySelector("script");
firstScript.parentNode.insertBefore(beopPixel, firstScript);
});

Legacy: image pixel

Setup

Page view

<!-- Without content -->
<img src="https://tw.beop.io/conversion?event=pageview&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID" alt="" width="1" height="1" />
<!-- With content -->
<img src="https://tw.beop.io/conversion?event=pageview&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID&content=YOUR_CONTENT_ID" alt="" width="1" height="1" />

Conversion

<!-- Without content -->
<img src="https://tw.beop.io/conversion?event=complete&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID" alt="" width="1" height="1" />
<!-- With content -->
<img src="https://tw.beop.io/conversion?event=complete&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID&content=YOUR_CONTENT_ID" alt="" width="1" height="1" />
<!-- With content and value-->
<img src="https://tw.beop.io/conversion?event=complete&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID&content=YOUR_CONTENT_ID&value=2EUR" alt="" width="1" height="1" />
<!-- With value-->
<img src="https://tw.beop.io/conversion?event=complete&account=YOUR_ACCOUNT_ID&campaign=YOUR_CAMPAIGN_ID&value=2EUR" alt="" width="1" height="1" />