Install the Shopify Website Pixel
The Shopify Website Integration consists of two integrations covering the full tracking spec.
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:
Create a new Client Source in Converge
{Storename} Storefront
Install the Converge Liquid snippet in your storefront
Shopify Liquid
, and copy that snippet.</head>
tag in the theme.liquid file. Click SaveVerify that the integration is working correctly
$page_load
, Viewed Product
and Viewed Collection
events by visiting the store and seeing that these events arrive in the Source Log.Create a new Client Source in Converge
{Storename} Checkout
Install the Converge Checkout as an extension in Shopify Customer Events
Shopify Custom Pixel
, and copy that snippet.Converge Pixel
Verify that the integration is working correctly
Added To Cart
, Started Checkout
and Added Payment Info
events by visiting the store and seeing that these events arrive in the Source Log.The Converge Website installation for a Shopify Liquid store consists of:
Create a new Client Source in Converge
{Storename} Storefront
Install the Converge Liquid snippet in your storefront
Shopify Liquid
, and copy that snippet.</head>
tag in the theme.liquid file. Click SaveVerify that the integration is working correctly
$page_load
, Viewed Product
and Viewed Collection
events by visiting the store and seeing that these events arrive in the Source Log.Create a new Client Source in Converge
{Storename} Checkout
Install the Converge Checkout as an extension in Shopify Customer Events
Shopify Custom Pixel
, and copy that snippet.Converge Pixel
Verify that the integration is working correctly
Added To Cart
, Started Checkout
and Added Payment Info
events by visiting the store and seeing that these events arrive in the Source Log.The Converge Website installation for a Shopify Headless store consists of:
Create a new Client Source in Converge
{Storename} Storefront
Install the Converge JS Base Snippet
Verify that the integration is working correctly
$page_load
events are coming in correctly in the Source Logs.Create a new Client Source in Converge
{Storename} Checkout
Install the Converge Checkout as an extension in Shopify Customer Events
Shopify Custom Pixel
, and copy that snippet.Converge Pixel
Verify that the checkout integration is working correctly
Added To Cart
, Started Checkout
and Added Payment Info
events by visiting the store and seeing that these events arrive in the Source Log.Track the remaining Converge Spec
The Converge JS pixel only picks up $page_load-events by default for a headless store. You will typically have to supplement the following events using Converge JS for all Destinations to work optimally.
For more information on manually instrumenting events, read here.
Add appropriate aliases to stitch the session across all sources
checkout_token
as an alias before redirecting the user to the Shopify Checkout to make sure that the storefront session and the checkout session can be linked to the same user.
You can read more about aliases here.Verify that the integration is working correctly
$page_load
to Placed Order
and verifying that all events are properly tracked without any Source Warnings.If you have multiple Shopify stores active in different countries, please check our guide on Shopify Internationalization here.
The integration relies on Shopify Standard Events (see Shopify Standard Events for reference).
If you are using custom code to handle, for example, cart, checkout, or payment, it’s possible that the standard Shopify events will not be triggered or will have missing data. In those cases, you may need to implement the affected tracking events manually. See Manually instrumenting events for reference.
Why do I need both a Shopify Liquid and a Shopify Checkout Pixel?
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.
Why do I have too few client-side events tracked on the Shopify Checkout
You might have Custom Pixel Privacy settings set up in Shopify that limit us from tracking the Checkout.
Navigate to the Shopify Admin dashboard, navigate to Settings > Customer Events and find the Converge Pixel
.
Click on it to open the settings.
Verify in your Custom Pixel settings whether you have set the Permission flag to Not required.
Also make sure that Data sale is set to Data collected does not qualify as a data sale.
If you are using a custom cookie banner that is not properly integrated with Shopify, then Shopify might block our pixel from loading on their checkout. To verify, go through the following steps:
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 |
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.
Example of the utility object on a Product Page