Installing the TrackJS agent is the only step needed to start tracking errors:
1. Get Agent Install Snippet
2. Insert Snippet In Theme Layout (Install The TrackJS Agent)
Layout/theme.liquid which used almost everywhere.
The snippet can be inserted using the Shopify Admin site. In the admin site, navigate to “Online Store -> Themes”, click the current theme’s “…” button and click “Edit Code”.
Add the install snippet to the layout and save:
3. Verify The Install
The test error will show up in the TrackJS Dashboard if everything is configured correctly:
Know When Customers Hit Missing Urls
1. Modify The Main 404 Template or Section
In the Dawn theme, the content for 404 (Not Found) pages is contained in
Sections/main-404.liquid. Most themes should have a similar liquid template.
Scripts in this template will run any time a user lands on a missing page:
2. Test A Missing URL
We can easily modify the address in the browser to test:
TrackJS should display the error within the minute:
Protect Your Whole Store
Themes may have Layouts and Templates that don’t use the main layout. The Dawn theme has a `gift_card.liquid’ template that doesn’t use the default theme layout for example. This prevents agent installation from a single code snippet. Using a theme snippet to centralize the TrackJS agent config makes it easier to install the agent in multiple layouts or templates:
1. Create A Theme Snippet
From the code editor, add a new snippet file to your theme at
Snippets/trackjs-install.liquid. Copy the same agent install code used above into the file.
2. Render The Snippet
Now the agent can be installed anywhere it is needed with a single line in the
Templates\gift_card.liquid now look like this:
Make It Production Ready
At this point, TrackJS is in a fully supported, production ready configuration. However, there a few more things you may wish to do for extra production polish. The Shopify code editor has some opinions about our current setup:
Use The Shopify CDN
While the TrackJS script agent is served by a globally available CDN, the Shopify CDN can be used as well. This has the advantage of reducing your external site dependencies.
1. Download The TrackJS Agent
Save the TrackJS Agent Script to your computer.
2. Add The Agent To Theme Assets
Add the downloaded
t.js file to the theme assets at
Assets/t.js. If using Shopify’s online code editor, click “+ Add a new asset” in the Assets folder.
3. Update TrackJS Install Snippet
Tell the theme to use the new Shopify CDN location:
Use Async Script (Optional)
We do not recommend async script loading the agent, but it can be done if a store’s page performance is the top priority. Enabling async will result in the TrackJS agent missing errors that occur during page load. These errors can be very important because they may be ruining the initial display of the page. Replace the agent install snippet with an async enabled version:
Build With Confidence