// 1. Reading a string through the SDK records a 'usage' impression
//    when the key is an enabled sensor and analytics consent is on:
applyButton.textContent = client.t('offer.apply_cta', 'Apply now');

// 2. Record an interaction (and impressions you measure yourself):
applyButton.onclick = () => client.trackString('offer.apply_cta', 'interaction', { path: '/offers' });

// 3. Web: impressions when the element is at least 50% visible
import { bindStringSensors } from '@contentflow/sdk/web';
bindStringSensors(client);          // watches [data-cf-t="offer.apply_cta"] elements

import { useEffect } from 'react';
import { useCF, useCFTranslations } from '@contentflow/sdk/react';
import { bindStringSensors } from '@contentflow/sdk/web';

function ApplyButton() {
  const cf = useCF();
  useCFTranslations();   // re-render when the catalog loads or changes

  // 1. Reading a string through cf.t() records a 'usage' impression when the key is
  //    an enabled sensor and analytics consent is on. useCFString() does not.
  const label = cf.t('offer.apply_cta', 'Apply now');

  // 2. Record an interaction (and impressions you measure yourself):
  return <button onClick={() => cf.trackString('offer.apply_cta', 'interaction', { path: '/offers' })}>{label}</button>;
}

// 3. Web: bind once near the root. Elements marked data-cf-t="offer.apply_cta" get an
//    impression when at least 50% visible, and an interaction on every click, so they
//    need no onClick from step 2.
function StringSensors() {
  const cf = useCF();
  useEffect(() => {
    const sensors = bindStringSensors(cf);
    return () => sensors.dispose();
  }, [cf]);
  return null;
}

import { Pressable, Text } from 'react-native';
import { useCF, useCFTranslations } from '@contentflow/sdk/react-native';

function ApplyButton() {
  const cf = useCF();
  useCFTranslations();   // re-render when the catalog loads or changes

  // 1. Reading a string through cf.t() records a 'usage' impression when the key is
  //    an enabled sensor and analytics consent is on. useCFString() does not.
  const label = cf.t('offer.apply_cta', 'Apply now');

  // 2. Record an interaction. Outside a browser there is no page path unless you pass one.
  const onPress = () => cf.trackString('offer.apply_cta', 'interaction', { path: '/offers' });

  // 3. No DOM binder in React Native: when your own visibility check sees the element,
  //    report it with cf.trackString('offer.apply_cta', 'impression', { source: 'viewport' }).
  return <Pressable onPress={onPress}><Text>{label}</Text></Pressable>;
}

// 1. Load the catalog (it carries the enabled sensor keys) and read the text.
//    Swift: reading a string records nothing, so record the impression yourself.
let strings = try await client.getStrings()
applyButton.setTitle(strings.string("offer.apply_cta", fallback: "Apply now"), for: .normal)
try await client.trackSensorImpression(key: "offer.apply_cta")

// 2. Record an interaction when the person taps:
try await client.trackSensorInteraction(key: "offer.apply_cta", path: "/offers")

// 1. Load the catalog (it carries the enabled sensor keys), then read the text.
//    getString records an impression when the key is an enabled sensor
//    and analytics consent is on.
client.extensions.fetchStrings()
applyButton.text = client.extensions.getString("offer.apply_cta", "Apply now")

// 2. Record an interaction when the person taps (Kotlin takes a screen name, not a path):
applyButton.setOnClickListener {
    client.extensions.trackStringInteraction("offer.apply_cta", screen = "offers")
}

final cf = ContentFlow.instance;

// 1. Load the catalog (it carries the enabled sensor keys) and read the text.
//    Flutter: reading the map records nothing, so record the impression yourself.
final strings = await cf.getStrings();
final label = strings['offer.apply_cta'] ?? 'Apply now';
await cf.trackStringImpression('offer.apply_cta');

// 2. Record an interaction when the person taps:
await cf.trackStringInteraction('offer.apply_cta', path: '/offers');