website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by
Archbee
SEGMENT EVENT TRACKING

Adding Tracking

17min

Chord sends events to Segment from the OMS and JavaScript SDKs. You need to install Segment's tracking library and add some SDK functions to your website to get events flowing.

  1. Install Segment library
  2. Implement UI events
  3. Verify in Segment

Install Segment library

Chord's JavaScript SDKs require installing Segment's Analytics.js tracking library on your website. First, you'll need your source write key. The write key determines which source your events will be sent to in Segment.

To locate your write key, navigate to your front-end website source in Segment and select Settings > API Keys. Typically you'll have different front-end website sources for development, staging, and production, so make sure you're selecting the correct source. Never send data to your production source except for your production website.

Next, install Analytics.js via one of the following methods:

Install with the Segment snippet

Copy and paste the Segment snippet into the <head> tag of your site. This snippet loads and initializes Segment asynchronously. You'll need to replace YOUR_WRITE_KEY in the snippet with the write key for your Segment front-end website source.

Install @segment/snippet from npm

Instructions for installing from npm are available in the Github repo.

Segment's other npm package, analytics-next, is not supported by either Chord's SDKs or Segment's Consent Manager. Chord's SDKs use Segment's Typewriter client to send events to Segment, and Typewriter is not currently compatible with analytics-next.

Follow a framework-specific guide

Several JavaScript frameworks have examples or plugins to make this installation easier.

Next.js: Official example

Gatsby: Community plugin

Implement UI events

Chord's JavaScript SDKs automatically send some tracking events from your website to Segment. For example, you might see this code in a button:

JS
|
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { cart, addToCart } = useCart()
  const onClick = ({ sku, quantity }) => {
    addToCart({ sku, quantity })
  }
}


The addToCart function makes a request to the Chord API to update the customer's cart, updates the cart object with the new cart contents, and then sends a Product Added event to Segment with information about the product that was added.

Some SDK functions exist just to send tracking events to Segment for UI interactions. These functions are available via the useAnalytics hook and are always prefixed with track. Add these functions to your UI components to track customer interactions.

For example, to track when a customer views the shopping cart, you might add this code to your cart component:

JS
|
import { useAnalytics } from '@chordcommerce/react-autonomy'

export default () => {
  const { trackCartViewed } = useAnalytics()
  useEffect(() => {
    trackCartViewed()
  }, [])
}


If you don't add trackCartViewed to your UI component, this tracking event will not be sent to Segment. We recommend reviewing the useAnalytics SDK reference and adding all applicable functions to your website code.

For more examples of instrumenting your UI components, review Chord's website starter kits.

Verify in Segment

After you've installed Segment's Analytics.js library and added some SDK functions to your UI components, verify that Segment is receiving tracking events.

In Segment, navigate to your website front-end source, and select the Debugger tab. This shows you a live feed of tracking events that Segment is receiving.


Document image



Interact with your website, and you should see new events appear in the Debugger. Inspect the contents of an event by selecting it. Note that events have different types, including Page, Track, and Identify.

Segment post-installation checklist

Complete this checklist to verify Segment has been installed correctly on your website.

The correct source shows your events. Events from development and staging environments should not appear in your production source, and vice versa.

The back-end source shows Track events. For example, you should see an Order Completed event when an order is completed. You should see all events in The Chord Tracking Plan marked as sent by the OMS.

The front-end source shows Track events. For example, you should see a Product Added event when a product is added to your shopping cart, and a Cart Viewed Event when you view the cart page. You should see all events in The Chord Tracking Plan marked as sent by the SDK, unless they are UI events that you Adding Tracking.

The front-end source shows Page events.

Initial page load sends a Page event.

Clicking an internal link sends a Page event.

The front-end source shows Identify events when a customer enters an email address. For example, you should see an Identify event when a customer fills out a newsletter sign-up form.

Troubleshooting

I'm not seeing any events in the back-end source.

The OMS might be sending events to a different back-end source than you're expecting. Log into your OMS admin, and navigate to Settings > Stores. In the Environment Variables section, look for SEGMENT_WRITE_KEY. The write key determines the source that events are sent to.

I'm not seeing any events in the front-end source.

Check that the write key in your website code is for the correct front-end source. Next, try following Segment's troubleshooting guide for Analytics.js.

I only see a Page event when the site first loads, not when I click around.

Many frameworks like Next.js handle page transitions for internal links with JavaScript, which sometimes needs to be explicitly configured to generate a Page event. For example, here's how the Chord Next.js starter handles it.

if you have any questions or need help, please reach out to us at help@chord.co



Updated 14 Apr 2023
Did this page help you?
PREVIOUS
What are event tracking
NEXT
What is the Tracking Plan?
Docs powered by
Archbee
TABLE OF CONTENTS
Install Segment library
Install with the Segment snippet
Install @segment/snippet from npm
Follow a framework-specific guide
Implement UI events
Verify in Segment
Segment post-installation checklist
Troubleshooting
Docs powered by
Archbee