Skip to content
Twilight React Playground
ثيم رائدaren

SiftSnippet

componentAdvancedbrowser

Loads Sift's fraud-detection script with the store's beacon key and the customer id; the engine mounts it when the store has a key.

import { SiftSnippet, LazySiftSnippet, SiftSnippetProps } from '@salla.sa/twilight-theme-engine/tracking';

In plain words

Sift is a fraud-detection service: its script watches how visitors browse so suspicious orders can be flagged. SiftSnippet loads that script and tells it which store and which customer this is. It draws nothing.

The engine renders it automatically when the store's settings contain a Sift key, so a theme rarely touches it.

Signature

function SiftSnippet(props: SiftSnippetProps): null
const LazySiftSnippet: React.LazyExoticComponent<typeof SiftSnippet>

interface SiftSnippetProps {
  beaconKey?: string;    // none: nothing happens
  customerId?: string;   // '' for guests
}

Example

app/components/FraudCheck.tsx
import { Suspense } from 'react';
import { LazySiftSnippet } from '@salla.sa/twilight-theme-engine/tracking';
import { useUser } from '@salla.sa/twilight-theme-engine/hooks/useUser';

export function FraudCheck({ beaconKey }: { beaconKey: string }) {
  const { data: user } = useUser();
  const customerId = user?.type === 'user' && user.id ? String(user.id) : '';
  return (
    <Suspense fallback={null}>
      <LazySiftSnippet beaconKey={beaconKey} customerId={customerId} />
    </Suspense>
  );
}

How it behaves

  • In an effect it pushes _setAccount, _setUserId, _setSessionId (from Salla.analytics._anonymousId) and _trackPageview onto window._sift, then appends https://cdn.sift.com/s.js.

  • The default body:start handler renders it when store.settings.keys.sift is set (priority 90), with the customer's id for a logged-in customer. This demo store has no Sift key, so this page has no live demo.

Gotchas

  • Unmounting sets window._sift = undefined, discarding anything else queued there, and a new customerId runs the effect again: the queue is pushed again and the script re-added.

Related

registerDefaultHooks

Registers the engine's built-in slot handlers (GTM, bundles, store closed, fast checkout, price quote, pre-order); importing the hooks module already runs it.

GoogleTagBody

Loads a Google Tag Manager container on the page and filters sensitive fields out of dataLayer pushes; the engine mounts the store's automatically.

Source and docs