How to install Beacon in Hydrogen Shopify stores

Overview

Sendlane’s Beacon tracking pixel allows you to follow your customers around your website, collecting information on page views, carts, and purchases.

Headless Shopify store users must provide the Beacon script with information about the store and its structure before data can be sent to Sendlane.

Read on to learn how to install and configure Beacon general tracking on your headless Shopify store.

Why do headless stores need to do additional setup to install Beacon general tracking?

The structure of traditional Shopify stores (those using a Shopify theme instead of a custom frontend) includes information about a store’s identification, views on product pages, product variant selection, and cart activity, all of which Beacon needs to provide full general tracking functionality.

Headless stores’ structure can vary widely because they are not beholden to the standardized architecture of Shopify themes. Your unique store website still provides all the information Beacon needs to function, but without the traditional theme structure to guide it, Beacon can’t recognize or find that information.

When you install Beacon on your headless store, you’ll need to grab the general tracking code from Sendlane and add a few additional properties in order to:

• Give Beacon your store’s identifier so it knows which account to send data back to in Sendlane

• Implement product view tracking so Beacon knows where your product pages and pop-up modals are

• Implement cart tracking so Beacon knows where your cart activity happens

Complete the steps below in the order they appear to ensure your Beacon installation is successful.

Step One: Install Beacon general tracking

Grab the Beacon general code from your Sendlane account page:

1. Click Account

2. Click Beacon

3. Click Get Beacon Code

4. Click Copy code

You’ll get a snippet like the following, where 1a2b3c4d5e6f is your account’s general tracking event ID.

<script>
window._Sendlane = window._Sendlane || [];
</script>
<script src="https://sendlane.com/scripts/pusher.js" async></script>
<script>
_Sendlane.push({
    event_id: '1a2b3c4d5e6f'
});
</script>

Install this code:

1. In your store’s main template or layout file

2. Ensure it loads on every page of your store

3. Ensure it loads BEFORE any tracking events occur

Step Two: Add store identification to Beacon

Now that you’ve got the Beacon general tracking code where it needs to be, you need to add properties to the script to identify your platform and store name to Beacon.

Add the following lines:

window._Sendlane.platform = 'shopify'; 
window._Sendlane.shop = 'your-store-name.myshopify.com';

Keep shopify as shopify and replace your-store-name with your Shopify store’s actual domain.

Ensure these properties are set when your store loads before product and/or cart tracking occurs.

Your final Beacon general tracking implementation should look something like this:

 <script> window._Sendlane = window._Sendlane || []; 
</script> 
<script src="https://sendlane.com/scripts/pusher.js" async></script>
<script> 
_Sendlane.push({ 
event_id: 'YOUR_EVENT_ID'
 }); 
</script>

<script> 
window._Sendlane.platform = 'shopify'; 
window._Sendlane.shop = 'your-store-name.myshopify.com'; 
</script>

Step Three: Implement product tracking

To track product and variant views and abandoned views, you’ll need to set product information whenever a website visitor views a product or selects a variant.

Add the following tracking codes wherever products and their variants can be viewed:

1. On product page load:

window._Sendlane.product_id = '123456789' // Replace with actual product ID

1. When a variant is selected (including quick view modals):

window._Sendlane.variant_id = '987654321' // Replace with actual variant ID

Step Four: Implement cart tracking

To track added to cart and abandoned cart events, update the cartEvents property whenever cart changes occur.

Add this tracking code whenever products are added to or removed from the cart, cart quantities are updated, or cart is cleared:

window._Sendlane.cartEvents = [{
    "items": [{
        "product_id": "123456789", // Replace with actual product ID
        "variant_id": "987654321" // Replace with actual variant ID
    }]
}]

Step Five: Test Beacon installation

Follow each testing procedure outlined below to ensure each piece of your Beacon general tracking implementation was successful.

General tracking:

1. Open your store in Chrome

2. Right click anywhere

3. Click Inspect

4. Open the Network tab

5. Filter for sendlane

6. Refresh the page

7. Verify that requests are going to sendlane.com

Product tracking:

1. Navigate to a product page

2. Open the Console tab

3. Type window._Sendlane

4. Verify that the product_id is set correctly

5. Select a variant

6. Verify that the variant_id is set correctly

Cart tracking:

1. Add an item to your cart

2. Type window._Sendlane.cartEvents in the Console

3. Verify that the cart’s data structure matches the example in the previous section