Setting Up Lolly Pixel on Your Custom Website Using JavaScript

Setting Up Lolly Pixel on Your Custom Website Using JavaScript

Overview

Lolly Pixel allows you to track visitor activity, measure campaign performance, and optimize your influencer marketing efforts. By integrating the pixel into your custom website using JavaScript, you can collect valuable data on user interactions and conversions.

Main tracking script

For most websites and JavaScript frameworks, you can simply insert the script on the public index.html file so it will be available when the website or framework loads. 
1. Find your main index file (index.html, index.php). 
2. Locate the <head> tag: The <head> tag is typically at the top of your document, right after the opening <html> tag. 
3. Add the below code into the head section of your website before. Preferably before the closing head tag </head> 
4. Save your changes and publish. 

<!-- Lolly Pixel tracking js --> 
<script async src ="https://s3-eu-west-1.amazonaws.com/bucket-influencer-service-danish/pixel/manual_pixel.js?id=8ac3281a&v=2025-01-5"></script> 
<script> 
  window.pixlDataWrapper = window.pixlDataWrapper || []; 
  function lmark(){pixlDataWrapper.push(arguments);} 
  lmark('js', new Date()); 
  lmark('config', <Your Unique Identifier*>); 
</script> 
*Note: Your Unique Identifier can be found on your Integration page under the Pixel Integrations section.

Product View

To track a visit to the product page, call the sendVisitEvent() function.

window.sendVisitEvent() 

Note: Call this function on each product page and when user opens product popup.

Why is this important?
Tracking product views allows you to analyze which products attract the most attention and how users interact with them. This data helps brands optimize product positioning, improve user experience, and enhance campaign performance by identifying high-engagement products.

Added to Cart

To track the addition of items to the cart, you can use the sendCardEvent() function. 
The function accepts an optional cartInfo object containing information about the product. If the object is not provided, an event will be sent without product data. 

window.sendCartEvent({ quantity: 1, amount: 25.99, currency: 'USD', product_id: '12345', product_title: 'Bottle Grey’, product_url: window.location.href, sku: 'SKU123' }); 

Why is this important?
Tracking "Add to Cart" events helps measure purchase intent and identify high-interest products. It allows brands to optimize pricing, retarget users who abandoned their carts, and understand which products drive the most engagement before checkout.

Available cartInfo parameters (all optional): 

Field 
Type 
Description 
quantity 
Number 
Quantity of added product 
amount 
Number 
Price per unit 
currency 
String 
Currency code (for example, "USD") 
productId 
String 
Product ID 
productTitle 
String 
Product title 
productUrl 
String 
Product URL 
productSku 
String 
Product SKU 

Completed Order 

To track the order processing, you need to call the function sendOrderEvent(orderInfo)
 
window.sendOrderEvent({ currencyCode: 'USD', isComplete: true, orderAmount: 99.99, customerEmail: 'customer@example.com', status: 'paid', billingAddress: { firstName: 'Eric', lastName: 'Campana', email: 'customer@example.com', city: 'New York', countryCode: 'USA', postalCode: '101000', phone: '+5 999 123-45-67' } }); 

Required fields OrderInfo: 

Field 

Type 

Description 

status 

String 

Order status ("paid", "pending", etc.) 

billingAddress 

Object 

Information about the payer (details below) 


billingAddress structure (optional object) 

Field 

Type 

Description 

firstName 

String 

Customer first name 

LastName 

String 

Customer last name 

email 

String 

Customer email 

city 

String 

Customer city 

countryCode 

String 

Customer country code (USA / FR / etc) 

postalCode 

String 

Customer postal code 

phone 

String 

Customer phone 


By integrating the sendOrderEvent function effectively, you ensure a seamless tracking of completed orders, providing valuable insights into your customer behavior and purchase flow. This data helps improve your campaign strategies, optimize user experience, and boost overall business performance.


If you have any issues or concerns, please reach out to us at support@lolly.com
    • Related Articles

    • Setting Up PayPal Direct Payments

      Overview A Guide to Setting Up Direct Payouts. Our guide will walk you through the process of integrating with the PayPal Payouts API. This integration allows you to efficiently process bulk payments to your affiliates directly from the Lolly ...
    • Campaigns Overview

      Overview: In Campaigns, users will be able to set up a list of campaigns and break them into individual jobs for a list of creators. Further, Users will be able to view all active and inactive campaigns along with their budget, creators list and ...
    • Discovery Overview

      Overview: Discovery is Lolly’s powerful creator search tool, giving you access to millions of influencer profiles across Instagram, TikTok, and YouTube to find the perfect match for your campaigns. It allows brands to discover, filter, and analyze ...
    • Home Page Overview

      The Home Page serves as the central hub for the platform, providing easy access to major functionalities and resources for users. From campaign creation to influencer discovery, it ensures a seamless start to your Lolly journey. Get Started ...
    • Settings Overview

      Overview Account settings are where you’ll find and manage all the details of your plan and team. You can set up your team to have access to the software, manage security and passwords, track usage and make changes to your plan and view your payment ...