Add the tag
Put it in <head>, before your other scripts, on every page (your base layout or theme header). Use the project's public key from API tokens.
<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="cs_live_pk_…" data-codeskop-release="2.3.0"></script>It's about 13 KB gzipped, served from jsDelivr's CDN. @1 picks up compatible updates automatically.
In your templates
Render the signed-in user's ID into data-codeskop-user-id and every event on the page is attributed to them. Use your own ID, never an email.
{# templates/base.html, inside <head> #}<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="{{ CODESKOP_KEY }}" {% if user.is_authenticated %}data-codeskop-user-id="{{ user.pk }}"{% endif %}></script>{{-- resources/views/layouts/app.blade.php, inside <head> --}}<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="{{ config('services.codeskop.key') }}" @auth data-codeskop-user-id="{{ auth()->id() }}" @endauth></script>%# app/views/layouts/application.html.erb, inside <head> %><script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="%= ENV["CODESKOP_KEY"] %>" % if current_user %>data-codeskop-user-id="%= current_user.id %>"% end %>></script>@* Views/Shared/_Layout.cshtml, inside <head> *@<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="@Configuration["Codeskop:Key"]" data-codeskop-user-id="@(User.Identity?.IsAuthenticated == true ? User.FindFirst("sub")?.Value : "")"></script>// functions.php in your (child) themeadd_action('wp_head', function () { $user = get_current_user_id(); printf( '<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="%s"%s></script>', esc_attr('cs_live_pk_…'), $user ? ' data-codeskop-user-id="' . esc_attr($user) . '"' : '' );}, 1);{%- comment -%} layout/theme.liquid, inside <head> {%- endcomment -%}<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="cs_live_pk_…" {% if customer %}data-codeskop-user-id="{{ customer.id }}"{% endif %}></script>Webflow, Squarespace, Wix and other site builders: paste the tag into the site-wide Custom code → Head setting.
Attributes
| Option | Type | Default | Description |
|---|---|---|---|
| data-codeskop-key | string | required | The project's public key (cs_live_pk_… or cs_test_pk_…). |
| data-codeskop-user-id | string | none | The signed-in user's ID, rendered by your server. |
| data-codeskop-release | string | none | Your site's version or deploy, to compare releases. |
| data-codeskop-environment | string | production | Shown on events. |
| data-codeskop-network | "false" | on | Turn off fetch/XHR capture. |
| data-codeskop-errors | "false" | on | Turn off error capture. |
| data-codeskop-page-views | "false" | on | Turn off page views (product analytics). |
Calling the API
The SDK is on window.Codeskop with the same functions as the npm package (Installation & setup).
// Anywhere after the tag (or after the stub, with async):Codeskop.identify("user-42"); // after login, if you didn't render data-codeskop-user-idCodeskop.track("order_completed", { value: 49.99, currency: "KES" });Codeskop.recordException(error); // a handled errorCodeskop.reset(); // on logoutLoading it async
To keep the tag off the critical path, load it with async and define this small stub first. Calls made before the SDK arrives are queued and replayed. Errors thrown before it loads aren't captured, so prefer the plain tag if you need every early error.
<script> window.Codeskop = window.Codeskop || { q: [] }; ['identify', 'track', 'screen', 'recordException'].forEach(function (m) { Codeskop[m] = Codeskop[m] || function () { Codeskop.q.push([m, [].slice.call(arguments)]); }; });</script><script async src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1/dist/codeskop.min.js" data-codeskop-key="cs_live_pk_…"></script>Content Security Policy
If your site sends a CSP header, allow the CDN and the ingest API:
Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net; connect-src 'self' https://api.codeskop.com;Pinning a version
Banks and other sites that require Subresource Integrity can pin an exact version. jsDelivr shows the integrity hash for each file. You then upgrade by hand.
<script src="https://cdn.jsdelivr.net/npm/@codeskop/tracker@1.4.0/dist/codeskop.min.js" integrity="sha384-…" crossorigin="anonymous" data-codeskop-key="cs_live_pk_…"></script>Also have a backend?
Add a server SDK to see your server's errors and requests next to what the browser sees.