Tracking Pixel Setup

The tracking pixel is used for two purposes:

1) To track time-on-site and revisit engagement for your website

and

2) To get detailed, photo-level conversion and engagement data for all of your products powered by Pixlee E-commerce

Get Your Pixlee API Keys

1) First, log in to http://pixlee.com and click on the Settings button inside the top right hamburger menu.

(Alternatively, point your browser to https://app.pixlee.com/app#settings/account_settings while logged in).

Pixlee Dashboard


The settings page should look like this:

Pixlee Settings


2) Click on Pixlee API on the lefthand navigation bar.

From this page, record the value of Account API Key, we’ll need it later.

Pixlee API


Embed The Tracking Pixel

Copy paste the following script onto all webpages. If using a CMS, there will generally be a header or footer file that are implemented by all pages that you can paste this script into. We recommend placing this as early as possible. If using a tag manager like GTM, embed this in a custom HTML tag which loads into all webpages

<script id='pixlee_script' src="https://assets.pixlee.com/assets/pixlee_events.js"></script>
<script type="text/javascript">
    pixlee_analytics = new Pixlee_Analytics("Your_API_key");
</script>

IMPORTANT: In the above snippet, replace ‘Your_API_key’ with your Account API Key that you recovered in the previous step.

If you are simply tracking time-on-site and revisit engagement, you are done! If you are also looking to track conversion analytics, please read on.


Trigger Inbound Analytics Events

Now it is time to set up Engagement and Conversion events. A basic understanding of Javascript and jQuery is highly recommended. If you are embedding Pixlee widgets, you may skip the Engagement events section of these instructions.

Engagement (SKIP IF YOU ARE EMBEDDING PIXLEE WIDGETS)

Conversion

Note that Conversion events will only show up in Pixlee analytics if a Pixlee widget is involved. Therefore, for full funnel testing, it is recommended that a Pixlee widget be embedded and visited before triggering the Add to Cart and Complete Checkout events.

User Visits a Page with a Pixlee Widget (skip if you are embedding pixlee widgets)

Call this whenever a user visits a page which as a Pixlee Widget on it

pixlee_analytics.events.trigger('opened:widget', {...})

Required parameters:

User Clicks on the Pixlee Widget (skip if you are embedding pixlee widgets)

Call this whenever a user clicks on an item in the Pixlee widget

pixlee_analytics.events.trigger('opened:lightbox', {...})

Required parameters:

User takes an Action after Clicking on an Item (skip if you are embedding pixlee widgets)

Call this whenever a user clicks on an item in the Pixlee widget

pixlee_analytics.events.trigger('action:clicked', {...})

Required parameters:

User clicks ‘Load More’ button on the widget (skip if you are embedding pixlee widgets)

Call this whenever a user clicks ‘Load More’ button on the widget

pixlee_analytics.events.trigger('load:more', {...})

Required parameters:

User navigates right on the Widget (skip if you are embedding pixlee widgets)

Call this whenever a user clicks the ‘right’ button on the widget

pixlee_analytics.events.trigger('nav:right', {...})

Required parameters:

Add to Cart

Call this whenever and wherever an add to cart event happens

pixlee_analytics.events.trigger('add:to:cart', {...})

Required parameters:

Recommended Parameters:

Example:

pixlee_analytics.events.trigger(‘add:to:cart’, { ‘product_sku’: ‘SL-BENJ’, ‘price’: ‘13.00’, ‘quantity’: 1, ‘currency’: ‘USD’ });

Generally, there should be a way in your product page configuration to extract data about the product that the user is adding on the page. Once you have that information, you simply need to fire the trigger call when the user presses Add to Cart. We recommend utilizing the jQuery .click() event, which allows you to bind the trigger event to a button. See more information here.

A successful trigger should show up in the Network tab as a 200 call to inbound.pixlee.com/addToCart.

User Completes Checkout

Call this whenever a user completes a checkout and makes a purchase

pixlee_analytics.events.trigger('converted:photo', {...})

Required parameters:

Recommended Parameters:

Example:

pixlee_analytics.events.trigger(‘converted:photo’, {‘cart_contents’: [ { ‘price’: ‘13.00’, ‘product_sku’: ‘SL-BENJ’, ‘quantity’: 1 }, { ‘price’: ‘5.00’, ‘product_sku’: ‘AD-1324S’, ‘quantity’: 2 } ], ‘order_id’: 234232, ‘cart_total_quantity’: 3, ‘cart_total’: ‘18.00’, ‘currency’: ‘USD’});

Often times, your website will have a page for Checkout Completion, taking the user to a confirmation page where they are informed of their purchase details. This is the perfect page to load and fire this event - no click bind needed.

A successful trigger should show up in the Network tab as a 200 call to inbound.pixlee.com/conversion.

Mass Deploying Widgets on Product Despcription Pages (PDPs)

Pixlee allows you to easily add widgets on all product pages without having to manually add widget code to each new product page. That way, all you need to do is tag the content with appropriate products and widgets would automatically appear on the relevant product pages on your website.

Assuming that all of your products are in sync with Pixlee, you can embed a PDP Widget on your product page by doing the following.

1) Go to http://pixlee.com, log in, and navigate to the Publish tab.

(Alternatively, point your browser to https://app.pixlee.com/app#publish while logged in).

2) Click the “Install Product Displays” and it should present you with a lightbox that looks like following.

Products


3) Customize the widget as you wish. At the end, press the “Generate Embed Code” button and you’ll be presented with an embed code.

Pixlee PDP Widget

Copy the snippet of code and paste it inside your product template page. You can place it anywhere on the template depending on your styling preferences.

4) You’ll need to setup your templating engine in a way that the <= ENTER YOUR SKU ID CODE> gets replaced by the SKU of the product on the page.

5) If everything was done correctly, the product pages that have UGC photos tagged will have Pixlee widgets on them.

Custom

NOTE: If there are no images tagged with a product, Pixlee widget would not render and would hide itself on the specific page.