Implementing Lifesight Pixel
To integrate your website with Lifesight using our JavaScript SDK, you need to copy-paste the integration snippet into the header of your webpage.
Implementing via Google Tag Manager
We assume that you have already created a GTM container for your website. If you don't have a container yet, create one according to the setup and installation guide.
Step 1 : Setting up the Custom JS SDK
Create a new tag: When you are inside your container, click on the "Add a new tag" button in the container homepage or click on "New" in the "Tags" subpage.
Choose "Custom HTML tag": Click on the "Custom HTML" tag.
Configure the tag and click continue: Now copy-paste the Lifesight JavaScript code snippet.
<script src="https://sdk.lifesight.io/lifesight.min.js"></script>
Choose fire on All pages and click Create Tag: You can also choose to rename the tag.Created tags can be found in the Tags section of the container.
Publish changes: After you have created a new tag you can see that the "Unpublished Changes" counter incremented by one. To publish new tags, click the "Publish" button in the top-right corner and then confirm by clicking "Publish now".
That's it! You have now added Lifesight JavaScript SDK to your website. You can now see whether the system events, such as page_visit, are flowing in by going back to Lifesight by looking at customer Profiles.
Note - This trigger (Page View - Window Loaded) is for Single Page Application (SPA) websites ( (ReactS / Next JS based Websites).
Step 2: Instrumenting additional API calls
For every event that you wish to send to Lifesight (apart from page_view), you need to create the required variables, triggers, and tags that need to be configured through our Identify and Track calls.
Identify Function
Identify calls are fired when a user performs an identifying action like making a purchase or submitting a form. identify calls also associate a known user with their actions (even if previously anonymous).
When should you fire an Identify function?
After a user registers on your website or app
After a user logs in to your site or app
When a user updates their information, e.g., residential address, email ID
When you load a page accessible by a logged-in user (Although this is optional)
Note: You don't need to use the 'identify' function for anonymous visitors. Lifesight already assigns them an anonymous ID, so just 'page' and 'track' calls are enough.
Below are all the possible traits users can use (at least one identifier must be passed - customer_id, email, phone)
{
"identifiers":
{
"customer_id": "123",
"email": "[email protected]",
"phone": "1234567899"
}
"customer_name": "",
"customer_first_name": "",
"customer_last_name": "",
"address":
{
"city": "Bengaluru",
"country": "India",
"postalCode": "560067",
"state": "Karnataka",
"street": "High Street"
},
"age": "23",
"birthday": "2002-11-22", //format is fixed to be yyyy-mm-dd
"company":
{
"name": "Lifesight",
"id": "1234",
"industry": "Ad-Tech",
"employee_count": "200",
"plan": "Platinum"
},
"description": "Tall",
"gender": "Male",
"title": "Product Intern",
"username": "RishiZen",
"website": "www.rishi.com",
"Avatar": "www.pathToImage.com"
}
Example of how this Identify call is configured on Google Tag Manager
Track Function
The track call lets you record the user actions along with any properties associated with them. Each user action is called an event. Every event has a name associated with it, for example, Product Reviewed. This event might also have some properties associated with it, like review_id and rating.
Example of track call for event product_view payload
lifesight.track
( "product_view",
{
"product":
{
"lineitem_price": 4.99,
"product_id": 6814932369498,
"product_image_url": "//cdn.shopify.com/s/files/1/0572/8498/4922/products/Product8.png?v=1667508518",
"product_name": "Pupman Bootique Halloween Printed Dog Collar",
"product_url": "/products/bootique-hw-collar",
"sku": "ABC123"
}
}
)
Example of Track call for event form_submit Payload
lifesight.track ("form_submit",
{
"campaign_name": "List_test", // there can be multiple forms under this campagin name
"form_name": "List_test", // Sign Up Newsletter form
"cta": "register", //Call to Action
"identifiers":
{
"anonymous_id": "4c01a409-b70a-49a3-aa40-ac5975ec8087",
"email": "[email protected]"
},
"input":
{
"email": "[email protected]",
"phone": "+91xxxxxxxxxx",
"birthday": "1999-10-18", //format is fixed to be yyyy-mm-dd
"last_name": "sai",
"first_name": "rohit",
"address":
{
"city": "Bengaluru",
"country": "India",
"postal_code": "560067",
"state": "Karnataka",
"street": "High Street"
},
"age": "23",
"company":
{
"name": "Lifesight",
"id": "1234",
"industry": "Ad-Tech",
"employee_count": "200",
"plan": "Platinum"
},
"description": "Tall",
"gender": "Male",
"title": "Product Intern",
"website": "www.rishi.com",
"website_platform":"shopify",
"Product_interested":"connect",
"contacts_count":"",
"monthy_ad_spent": "",
"additional_information":""
}
}
)
Example Track call is configured on Google Tag Manager
Examples of standard e-commerce client-side events that you can set up on your tag manager
Lifesight Pixel Event Name | Lifesight Display Name | Customer’s Event Name | Description |
product_view | Viewed Product | Product Viewed | When a Product is viewed. |
product_search | Search | Search | When a search is performed. |
add_to_cart | Added to Cart | Added to Cart | When an item is added to the shopping cart. |
product_list_view | Viewed Product List | Product List Viewed | When list of products on page, cart or order is viewed |
checkouts_create | Created Checkout | Checkout Created | When the checkout process is started. |
checkouts_update | Updated Checkout | Checkout Updated | When the checked list is updated with new set of items |
abandoned_checkout | Abandoned Checkout | Checkout Abandoned | When payment information is added in the checkout flow. |
orders_paid | Paid for Order | Payment Completed | When a payment is completed. |
orders_create | Placed Order | Order Placed | When an order is placed. |
form_submit | Submitted Form | Form Submitted | When a form is submitted for newsletter subscription or zero party survey data form fill. |
thank_you_page_view | Viewed Thank You Page | Thank You Page Viewed | The Thank you Page viewed by the user right when the order is completed after the payment is done. |
While configuring the events, make sure you use the same event naming convention mentioned in the above table. Some examples are given below in detail. The way to call the tag in the Google Tag manager is lifesight.track ( "add_to_cart", {identifiers…})