Skip to content
Docs menu Get started

Quickstart

Connect a website, send a page view, and see it arrive in the Sfere dashboard

On this page

This guide connects a website. For an app, a server or a Zid store, create the source the same way and follow the matching guide in the sidebar.

  1. Step 1: Create a source#

    1. Sign in to the Sfere dashboard and open Sources.
    2. Select New source, then choose A website.
    3. Name the source after the site, for example Main store, and finish the steps.

    Sfere creates the source, prepares your Sfere Data Warehouse, and builds the pipe between them. You do not need to set up a destination before your first event.

  2. Step 2: Copy the browser write key#

    Open the source and go to its Settings tab. Create a browser write key and copy it right away: the dashboard shows the full value only once, in the browser that created it. It looks like keyId:secret.

    A browser key is public by design. It can only send events, so it is safe in page source. See Write keys for the difference between browser and server keys.

  3. Step 3: Add the SDK to your site#

    Paste the loader into the <head> of every page, and replace YOUR_WRITE_KEY with the key from step 2.

    index.htmlHTML
    <script>
  !(function (w, d) {
    if (w.sfere) return;
    var q = (w.sfere = []);
    ["track", "page", "identify", "group", "alias", "reset", "setConsent"].forEach(function (m) {
      q[m] = function () {
        q.push([m].concat([].slice.call(arguments)));
        return q;
      };
    });
    var s = d.createElement("script");
    s.async = true;
    s.src = "https://cdn.sfere.io/sdk/v0.4/sfere.min.js";
    s.setAttribute("data-write-key", "YOUR_WRITE_KEY");
    s.setAttribute("data-host", "https://events.sfere.io");
    d.head.appendChild(s);
    q.page();
  })(window, document);
</script>

    The loader records a page view as soon as it runs. Using Google Tag Manager instead? Follow Install the JavaScript SDK.

  4. Step 4: Send a custom event#

    Page views need no extra code. To see a custom event too, add a call where the action happens:

    JavaScript
    sfere.track("add_to_cart", {
  currency: "USD",
  value: 149,
  items: [{ item_id: "sku_221", item_name: "Linen Shirt", price: 149, quantity: 1 }],
});

  5. Step 5: Confirm it arrived#

    1. Load a page on your site.
    2. In the dashboard, open the source and select Check for events on its setup steps, or open Live events and pick the source.
    3. Your page event appears within a few seconds. Select it to see the full payload.

    Nothing there? Check the browser’s Network tab for a request to https://events.sfere.io/api/s/p, then see Troubleshooting.

Next steps#