Website
Shopify Web
- Book a demo
- Community
Integrations
- Workspace
Ad Platforms
Settings
Website
Shopify Web
Install the Shopify Website Pixel
The Shopify Website Integration consists of two integrations covering the full tracking spec.
- The Shopify Storefront Integration
- The Shopify Checkout Integration
Installation Instructions
The installation process of Converge is slightly different based on whether you have a Shopify Liquid storefront; or whether you are running a Shopify Headless Storefront.
The Converge Website installation for a Shopify Liquid store consists of:
1
Create a new Client Source in Converge
- In Converge, click on Create a new source
- Pick Client-side from the modal
- Name your pixel: e.g.
{Storename} Storefront
2
Install the Converge Liquid snippet in your storefront
- Click on your newly created Source and from the modal pick
Shopify Liquid, and copy that snippet. - In the Shopify admin dashboard, navigate to Sales Channels > Online Store > Themes
- Click on ”…” next to the Customize button, and click Edit code.
- Go to the theme.liquid file and insert the snippet right above the closing
</head>tag in the theme.liquid file. Click Save
3
Verify that the integration is working correctly
- Always double-check that you did not break anything on the site after inserting the snippet.
It’s good practice to add the snippet to other themes in development as well and to add this snippet to your version control, so a theme switch does not kill website tracking
- Check that your pixel is working correctly by generating some
$page_load,Viewed ProductandViewed Collectionevents by visiting the store and seeing that these events arrive in the Source Log.
1
Create a new Client Source in Converge
- In Converge, click on Create a new source
- Pick Client-side from the modal
- Name your pixel: e.g.
{Storename} Checkout
2
Install the Converge Checkout as an extension in Shopify Customer Events
- Click on your newly created Source and from the modal pick
Shopify Custom Pixel, and copy that snippet. - In the Shopify Admin dashboard, navigate to Settings > Customer Events
- Click on Add custom pixel.
- Name your pixel, e.g.
Converge Pixel - Paste the script from the webapp here, make sure to modify the
__SHOP_NAME__string with the actual store name e.g.convergestore. You can find your store name in the URL of your Shopify Admin Dashboard. - Click on Save Pixel
- Click on Connect Pixel
Shopify might throw a warning that the pixel is not subscribed to any events. You can safely ignore this warning.
3
Verify that the integration is working correctly
- Check that your pixel is working correctly by generating some
Added To Cart,Started CheckoutandAdded Payment Infoevents by visiting the store and seeing that these events arrive in the Source Log.
FAQ
When you install the Shopify Web integration, you will install both the Shopify Storefront integration (which lives in the theme.liquid) a snippet in the Shopify Liquid as well as a Checkout integration, which leverages Shopify App Pixels.
You can check which integration checks which events in the Integration Event Spec.
The difference between the Liquid Pixel and the Checkout Pixel is that the Checkout Pixel is completely sandboxed by Shopify and loads with a large delay, see more info here on the limitations of App Pixels.
This is undesirable for events such as $page_load, where a user may browse away before the Converge pixel is loaded and before this event can be tracked.
For that reason, you would want to track all events in the theme.liquid. However, Shopify does not allow you to track reliably on the Checkout using this approach.
Event Spec
This integration auto-tracks the following events on the browser with all properties available according to the Converge Event Spec.
| Event Name | Event Description | Integration |
|---|---|---|
| PageView | When a customer views a page. | Storefront |
| Viewed Product | When a customer views a product. | Storefront |
| Viewed Collection | When a customer views a collection of products. | Storefront |
| Added To Cart | When a customer adds an item to cart | Checkout |
| Started Checkout | When a customer initiates the checkout process. | Checkout |
| Added Payment Info | When a customer adds their payment info on the checkout. | Checkout |
| Subscribed To Newsletter | When a customer subscribes to your newsletter. | Checkout |
| Placed Order | When a customer places an order. | Checkout |
This integration also auto-tracks some additional events that are not part of the Converge Event Spec.
| Event Name | Event Description | Integration |
|---|---|---|
| Added Contact Info | When a customer fills in the contact information in the checkout | Checkout |
| Added Shipping Info | When a customer fills in their shipping info in the checkout | Checkout |
Utility Object
Note that this utility object is not available on the Shopify Checkout.
Converge exposes a utility object called __cvg_shopify_info that picks up useful event properties and profile properties automatically.
We give an example below of requesting this object and what it looks like in the code example below.
window['__cvg_shopify_info']
>>> {
"product": {
"id": 7104622526660,
"title": "ADIDAS | CLASSIC BACKPACK",
"handle": "adidas-classic-backpack",
"description": "This women's backpack has a glam look, thanks to a faux-leather build with an allover fur print. The front zip pocket keeps small things within reach, while an interior divider reins in potential chaos.",
"published_at": "2022-04-05T12:53:37+02:00",
"created_at": "2022-04-05T12:53:37+02:00",
"vendor": "ADIDAS",
"type": "ACCESSORIES",
"tags": [
"adidas",
"backpack",
"egnition-sample-data"
],
"price": 7000,
"price_min": 7000,
"price_max": 7000,
"available": false,
"price_varies": false,
"compare_at_price": null,
"compare_at_price_min": 0,
"compare_at_price_max": 0,
"compare_at_price_varies": false,
"variants": [
{
"id": 41374006870212,
"title": "OS / black",
"option1": "OS",
"option2": "black",
"option3": null,
"sku": "AD-03-black-OS",
"requires_shipping": true,
"taxable": true,
"featured_image": null,
"available": false,
"name": "ADIDAS | CLASSIC BACKPACK - OS / black",
"public_title": "OS / black",
"options": [
"OS",
"black"
],
"price": 7000,
"weight": 0,
"compare_at_price": null,
"inventory_management": "shopify",
"barcode": null,
"requires_selling_plan": false,
"selling_plan_allocations": [
{
"price_adjustments": [
{
"position": 1,
"price": 7000
}
],
"price": 7000,
"compare_at_price": 7000,
"per_delivery_price": 7000,
"selling_plan_id": 1961754820,
"selling_plan_group_id": "adc3b0fe7ea2b6a111dff9a6fb88114ceab61eec"
}
],
"quantity_rule": {
"min": 1,
"max": null,
"increment": 1
}
}
],
"images": [
"//converge-dev.myshopify.com/cdn/shop/products/85cc58608bf138a50036bcfe86a3a362.jpg?v=1649156017",
"//converge-dev.myshopify.com/cdn/shop/products/8a029d2035bfb80e473361dfc08449be.jpg?v=1649156017",
"//converge-dev.myshopify.com/cdn/shop/products/ad50775123e20f3d1af2bd07046b777d.jpg?v=1649156017"
],
"featured_image": "//converge-dev.myshopify.com/cdn/shop/products/85cc58608bf138a50036bcfe86a3a362.jpg?v=1649156017",
"options": [
"Size",
"Color"
],
"media": [
{
"alt": null,
"id": 23867923562692,
"position": 1,
"preview_image": {
"aspect_ratio": 1.134,
"height": 560,
"width": 635,
"src": "//converge-dev.myshopify.com/cdn/shop/products/85cc58608bf138a50036bcfe86a3a362.jpg?v=1649156017"
},
"aspect_ratio": 1.134,
"height": 560,
"media_type": "image",
"src": "//converge-dev.myshopify.com/cdn/shop/products/85cc58608bf138a50036bcfe86a3a362.jpg?v=1649156017",
"width": 635
},
{
"alt": null,
"id": 23867923595460,
"position": 2,
"preview_image": {
"aspect_ratio": 1.134,
"height": 560,
"width": 635,
"src": "//converge-dev.myshopify.com/cdn/shop/products/8a029d2035bfb80e473361dfc08449be.jpg?v=1649156017"
},
"aspect_ratio": 1.134,
"height": 560,
"media_type": "image",
"src": "//converge-dev.myshopify.com/cdn/shop/products/8a029d2035bfb80e473361dfc08449be.jpg?v=1649156017",
"width": 635
},
{
"alt": null,
"id": 23867923628228,
"position": 3,
"preview_image": {
"aspect_ratio": 1.134,
"height": 560,
"width": 635,
"src": "//converge-dev.myshopify.com/cdn/shop/products/ad50775123e20f3d1af2bd07046b777d.jpg?v=1649156017"
},
"aspect_ratio": 1.134,
"height": 560,
"media_type": "image",
"src": "//converge-dev.myshopify.com/cdn/shop/products/ad50775123e20f3d1af2bd07046b777d.jpg?v=1649156017",
"width": 635
}
],
"requires_selling_plan": false,
"selling_plan_groups": [
{
"id": "adc3b0fe7ea2b6a111dff9a6fb88114ceab61eec",
"name": "Test Plan",
"options": [
{
"name": "Frequency",
"position": 1,
"values": [
"Deliver every month"
]
}
],
"selling_plans": [
{
"id": 1961754820,
"name": "Deliver every month",
"description": "",
"options": [
{
"name": "Frequency",
"position": 1,
"value": "Deliver every month"
}
],
"recurring_deliveries": true,
"price_adjustments": [
{
"order_count": null,
"position": 1,
"value_type": "fixed_amount",
"value": 0
}
],
"checkout_charge": {
"value_type": "percentage",
"value": 100
}
}
],
"app_id": "5284869"
}
],
"content": "This women's backpack has a glam look, thanks to a faux-leather build with an allover fur print. The front zip pocket keeps small things within reach, while an interior divider reins in potential chaos."
},
"variant": {
"id": 41374006870212,
"title": "OS / black",
"option1": "OS",
"option2": "black",
"option3": null,
"sku": "AD-03-black-OS",
"requires_shipping": true,
"taxable": true,
"featured_image": null,
"available": false,
"name": "ADIDAS | CLASSIC BACKPACK - OS / black",
"public_title": "OS / black",
"options": [
"OS",
"black"
],
"price": 7000,
"weight": 0,
"compare_at_price": null,
"inventory_management": "shopify",
"barcode": null,
"requires_selling_plan": false,
"selling_plan_allocations": [
{
"price_adjustments": [
{
"position": 1,
"price": 7000
}
],
"price": 7000,
"compare_at_price": 7000,
"per_delivery_price": 7000,
"selling_plan_id": 1961754820,
"selling_plan_group_id": "adc3b0fe7ea2b6a111dff9a6fb88114ceab61eec"
}
],
"quantity_rule": {
"min": 1,
"max": null,
"increment": 1
}
},
"currency": "GBP",
"collection": {
"products": null
},
"customer_id": null,
"email": null,
"address": null,
"phone": null,
"search": null
}