Hızlı başlangıç

arcy.js'i çatınıza kurun, kullanıcının kim olduğunu ARCY'ye bildirin, kurulumu doğrulayın, kimlikleri imzalayın, çıkışı izleyin ve ürününüzün olaylarını bildirin.

Ortamınızın kod parçacıkları, gerçek token yerleştirilmiş hâlde, panelde Yapılandır > Kurulum sayfasındadır; bu sayfa kodun kendisidir. Hesabınız yoksa Hesap oluşturma ile başlayın. Yeni bir çalışma alanında Kurulum sayfası Demo görüşmesinden sonra açılır.

ARCY'nin geri kalan her ayarı kodda değil panelde yapılır. Yapılandırma dosyası yoktur; bir ayarı değiştirince yeniden dağıtım gerekmez.

Bu sayfadaki her şeyi kodlama ajanınız deponuzda sizin yerinize yazabilir. ARCY MCP sayfasındaki arcy.js'i kurun komutunu çalıştırın. Ajan aşağıdaki adımları izler ve yalnızca kodunuzun yanıtlamadığını sorar.

Zorunlu adımlar

arcy.js'i Yazılım ürününüze ekleyin

Çatınızı seçin. Her yol aynı iki işi yapar: init() ARCY'yi ortam token'ınızla başlatır, identify() sayfadaki kullanıcının kim olduğunu bildirir.

Paketi kurun:

Terminal

npm install arcy.js

ARCY'yi, Yazılım ürününüzün başladığı yerde bir kez çağırın. Vite ya da Create React App projesinde bu yer kök bileşeninizdir:

src/App.tsx

import { useEffect } from "react"
import { supabase } from "./supabase"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    const { data } = supabase.auth.onAuthStateChange((_event, session) => {
      const user = session?.user
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })

    return () => data.subscription.unsubscribe()
  }, [])

  return <YourApp />
}

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

src/App.tsx

import { useEffect } from "react"
import { useUser } from "@clerk/clerk-react"
import arcy from "arcy.js"

export default function App() {
  const { isLoaded, isSignedIn, user } = useUser()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (!isLoaded || !isSignedIn) return
    arcy.identify(user.id, {
      user_first_name: user.firstName,
      user_last_name: user.lastName,
      user_email: user.primaryEmailAddress?.emailAddress,
      user_signed_up_at: user.createdAt?.toISOString(),
    })
  }, [isLoaded, isSignedIn, user])

  return <YourApp />
}

src/App.tsx

import { useEffect } from "react"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    return onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  }, [])

  return <YourApp />
}

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

src/App.tsx

import { useEffect } from "react"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  }, [])

  return <YourApp />
}

Paketi kurun:

Terminal

npm install arcy.js

arcy.js yalnızca tarayıcıda çalışır; çağrıyı bir istemci bileşeninde tutun.

Bir istemci bileşeni ekleyin ve kök yerleşiminizde çizdirin:

app/arcy.tsx

"use client"

import { useEffect } from "react"
import { supabase } from "@/lib/supabase"
import arcy from "arcy.js"

export function ARCY() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    const { data } = supabase.auth.onAuthStateChange((_event, session) => {
      const user = session?.user
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })

    return () => data.subscription.unsubscribe()
  }, [])

  return null
}

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

app/arcy.tsx

"use client"

import { useEffect } from "react"
import { useUser } from "@clerk/nextjs"
import arcy from "arcy.js"

export function ARCY() {
  const { isLoaded, isSignedIn, user } = useUser()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (!isLoaded || !isSignedIn) return
    arcy.identify(user.id, {
      user_first_name: user.firstName,
      user_last_name: user.lastName,
      user_email: user.primaryEmailAddress?.emailAddress,
      user_signed_up_at: user.createdAt?.toISOString(),
    })
  }, [isLoaded, isSignedIn, user])

  return null
}

app/arcy.tsx

"use client"

import { useEffect } from "react"
import { useSession } from "next-auth/react"
import arcy from "arcy.js"

export function ARCY() {
  const { data: session, status } = useSession()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (status !== "authenticated" || !session.user.id) return
    arcy.identify(session.user.id, {
      user_first_name: session.user.name,
      user_email: session.user.email,
    })
  }, [status, session])

  return null
}

session.user.id yalnızca session callback'iniz onu eklediyse gelir.

app/arcy.tsx

"use client"

import { useEffect } from "react"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"

export function ARCY() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    return onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  }, [])

  return null
}

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

app/arcy.tsx

"use client"

import { useEffect } from "react"
import arcy from "arcy.js"

export function ARCY() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  }, [])

  return null
}

app/layout.tsx

import { ARCY } from "./arcy"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        {children}
        <ARCY />
      </body>
    </html>
  )
}

ARCY'yi her sayfayı saran bileşen olan _app.tsx içinde bir kez çağırın:

pages/_app.tsx

import { useEffect } from "react"
import { supabase } from "@/lib/supabase"
import arcy from "arcy.js"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    const { data } = supabase.auth.onAuthStateChange((_event, session) => {
      const user = session?.user
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })

    return () => data.subscription.unsubscribe()
  }, [])

  return <Component {...pageProps} />
}

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

pages/_app.tsx

import { useEffect } from "react"
import { useUser } from "@clerk/nextjs"
import arcy from "arcy.js"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { isLoaded, isSignedIn, user } = useUser()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (!isLoaded || !isSignedIn) return
    arcy.identify(user.id, {
      user_first_name: user.firstName,
      user_last_name: user.lastName,
      user_email: user.primaryEmailAddress?.emailAddress,
      user_signed_up_at: user.createdAt?.toISOString(),
    })
  }, [isLoaded, isSignedIn, user])

  return <Component {...pageProps} />
}

pages/_app.tsx

import { useEffect } from "react"
import { useSession } from "next-auth/react"
import arcy from "arcy.js"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  const { data: session, status } = useSession()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (status !== "authenticated" || !session.user.id) return
    arcy.identify(session.user.id, {
      user_first_name: session.user.name,
      user_email: session.user.email,
    })
  }, [status, session])

  return <Component {...pageProps} />
}

session.user.id yalnızca session callback'iniz onu eklediyse gelir.

pages/_app.tsx

import { useEffect } from "react"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    return onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  }, [])

  return <Component {...pageProps} />
}

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

pages/_app.tsx

import { useEffect } from "react"
import arcy from "arcy.js"
import type { AppProps } from "next/app"

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  }, [])

  return <Component {...pageProps} />
}

Paketi kurun:

Terminal

npm install arcy.js

ARCY'yi Vue örneğini oluşturduğunuz yerde çağırın:

src/main.js

import { createApp } from "vue"
import { supabase } from "./supabase"
import arcy from "arcy.js"
import App from "./App.vue"

createApp(App).mount("#app")

arcy.init("YOUR_ENVIRONMENT_TOKEN")

supabase.auth.getUser().then(({ data: { user } }) => {
  if (!user) return
  arcy.identify(user.id, {
    user_first_name: user.user_metadata.first_name,
    user_last_name: user.user_metadata.last_name,
    user_email: user.email,
    user_signed_up_at: user.created_at,
  })
})

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

src/main.js

import { createApp } from "vue"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"
import App from "./App.vue"

createApp(App).mount("#app")

arcy.init("YOUR_ENVIRONMENT_TOKEN")

onAuthStateChanged(getAuth(), (user) => {
  if (!user) return
  arcy.identify(user.uid, {
    user_first_name: user.displayName,
    user_email: user.email,
    user_signed_up_at: user.metadata.creationTime
      ? new Date(user.metadata.creationTime).toISOString()
      : undefined,
  })
})

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

src/main.js

import { createApp } from "vue"
import arcy from "arcy.js"
import App from "./App.vue"

createApp(App).mount("#app")

arcy.init("YOUR_ENVIRONMENT_TOKEN")
arcy.identify("USER_ID", {
  user_first_name: "USER_FIRST_NAME",
  user_last_name: "USER_LAST_NAME",
  user_email: "USER_EMAIL",
  user_signed_up_at: "USER_SIGNED_UP_AT",
})

Paketi kurun:

Terminal

npm install arcy.js

Bir istemci eklentisi ekleyin. Dosya adındaki .client, eklentiyi sunucu tarafı render'ın dışında tutar:

plugins/arcy.client.js

import { supabase } from "~/lib/supabase"
import arcy from "arcy.js"

export default defineNuxtPlugin(() => {
  arcy.init("YOUR_ENVIRONMENT_TOKEN")

  supabase.auth.getUser().then(({ data: { user } }) => {
    if (!user) return
    arcy.identify(user.id, {
      user_first_name: user.user_metadata.first_name,
      user_last_name: user.user_metadata.last_name,
      user_email: user.email,
      user_signed_up_at: user.created_at,
    })
  })
})

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

plugins/arcy.client.js

import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"

export default defineNuxtPlugin(() => {
  arcy.init("YOUR_ENVIRONMENT_TOKEN")

  onAuthStateChanged(getAuth(), (user) => {
    if (!user) return
    arcy.identify(user.uid, {
      user_first_name: user.displayName,
      user_email: user.email,
      user_signed_up_at: user.metadata.creationTime
        ? new Date(user.metadata.creationTime).toISOString()
        : undefined,
    })
  })
})

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

plugins/arcy.client.js

import arcy from "arcy.js"

export default defineNuxtPlugin(() => {
  arcy.init("YOUR_ENVIRONMENT_TOKEN")
  arcy.identify("USER_ID", {
    user_first_name: "USER_FIRST_NAME",
    user_last_name: "USER_LAST_NAME",
    user_email: "USER_EMAIL",
    user_signed_up_at: "USER_SIGNED_UP_AT",
  })
})

Paketi kurun:

Terminal

npm install arcy.js

ARCY'yi kök yerleşiminizden, yalnızca tarayıcıda çalışması için onMount içinde çağırın:

src/routes/+layout.svelte

<script>
  import { onMount } from "svelte"
  import { supabase } from "./supabase"
  import arcy from "arcy.js"

  onMount(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    supabase.auth.getUser().then(({ data: { user } }) => {
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })
  })
</script>

<slot />

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

src/routes/+layout.svelte

<script>
  import { onMount } from "svelte"
  import { getAuth, onAuthStateChanged } from "firebase/auth"
  import arcy from "arcy.js"

  onMount(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  })
</script>

<slot />

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

src/routes/+layout.svelte

<script>
  import { onMount } from "svelte"
  import arcy from "arcy.js"

  onMount(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  })
</script>

<slot />

Paketi kurun:

Terminal

npm install arcy.js

ARCY'yi kök bileşeninizden çağırın:

src/app/app.component.ts

import { Component, OnInit } from "@angular/core"
import { supabase } from "./supabase"
import arcy from "arcy.js"

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements OnInit {
  ngOnInit() {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    supabase.auth.getUser().then(({ data: { user } }) => {
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })
  }
}

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

src/app/app.component.ts

import { Component, OnInit } from "@angular/core"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements OnInit {
  ngOnInit() {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  }
}

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

src/app/app.component.ts

import { Component, OnInit } from "@angular/core"
import arcy from "arcy.js"

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements OnInit {
  ngOnInit() {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  }
}

Paketi kurun:

Terminal

npm install arcy.js

Her sayfanın kullandığı yerleşime bir betik ekleyin. Astro betiği paketler ve tarayıcıda çalıştırır:

src/layouts/Layout.astro

<slot />

<script>
  import { supabase } from "../lib/supabase"
  import arcy from "arcy.js"

  arcy.init("YOUR_ENVIRONMENT_TOKEN")

  supabase.auth.getUser().then(({ data: { user } }) => {
    if (!user) return
    arcy.identify(user.id, {
      user_first_name: user.user_metadata.first_name,
      user_last_name: user.user_metadata.last_name,
      user_email: user.email,
      user_signed_up_at: user.created_at,
    })
  })
</script>

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

src/layouts/Layout.astro

<slot />

<script>
  import { getAuth, onAuthStateChanged } from "firebase/auth"
  import arcy from "arcy.js"

  arcy.init("YOUR_ENVIRONMENT_TOKEN")

  onAuthStateChanged(getAuth(), (user) => {
    if (!user) return
    arcy.identify(user.uid, {
      user_first_name: user.displayName,
      user_email: user.email,
      user_signed_up_at: user.metadata.creationTime
        ? new Date(user.metadata.creationTime).toISOString()
        : undefined,
    })
  })
</script>

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

src/layouts/Layout.astro

<slot />

<script>
  import arcy from "arcy.js"

  arcy.init("YOUR_ENVIRONMENT_TOKEN")
  arcy.identify("USER_ID", {
    user_first_name: "USER_FIRST_NAME",
    user_last_name: "USER_LAST_NAME",
    user_email: "USER_EMAIL",
    user_signed_up_at: "USER_SIGNED_UP_AT",
  })
</script>

Paketi kurun:

Terminal

npm install arcy.js

ARCY'yi kök rotanızdan, hydration sonrasında çalışması için bir effect içinde çağırın:

app/root.tsx

import { useEffect } from "react"
import { supabase } from "./supabase"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    const { data } = supabase.auth.onAuthStateChange((_event, session) => {
      const user = session?.user
      if (!user) return
      arcy.identify(user.id, {
        user_first_name: user.user_metadata.first_name,
        user_last_name: user.user_metadata.last_name,
        user_email: user.email,
        user_signed_up_at: user.created_at,
      })
    })

    return () => data.subscription.unsubscribe()
  }, [])

  return <Outlet />
}

Ad anahtarları user_metadata içinden gelir, orada hangi anahtarları tutuyorsanız onları kullanın.

app/root.tsx

import { useEffect } from "react"
import { useUser } from "@clerk/react-router"
import arcy from "arcy.js"

export default function App() {
  const { isLoaded, isSignedIn, user } = useUser()

  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
  }, [])

  useEffect(() => {
    if (!isLoaded || !isSignedIn) return
    arcy.identify(user.id, {
      user_first_name: user.firstName,
      user_last_name: user.lastName,
      user_email: user.primaryEmailAddress?.emailAddress,
      user_signed_up_at: user.createdAt?.toISOString(),
    })
  }, [isLoaded, isSignedIn, user])

  return <Outlet />
}

app/root.tsx

import { useEffect } from "react"
import { getAuth, onAuthStateChanged } from "firebase/auth"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")

    return onAuthStateChanged(getAuth(), (user) => {
      if (!user) return
      arcy.identify(user.uid, {
        user_first_name: user.displayName,
        user_email: user.email,
        user_signed_up_at: user.metadata.creationTime
          ? new Date(user.metadata.creationTime).toISOString()
          : undefined,
      })
    })
  }, [])

  return <Outlet />
}

Firebase tek bir görünen ad tutar, bu yüzden ayrıca gönderilecek bir soyad yoktur.

app/root.tsx

import { useEffect } from "react"
import arcy from "arcy.js"

export default function App() {
  useEffect(() => {
    arcy.init("YOUR_ENVIRONMENT_TOKEN")
    arcy.identify("USER_ID", {
      user_first_name: "USER_FIRST_NAME",
      user_last_name: "USER_LAST_NAME",
      user_email: "USER_EMAIL",
      user_signed_up_at: "USER_SIGNED_UP_AT",
    })
  }, [])

  return <Outlet />
}

Kurulacak paket yoktur. Paketleyiciniz yoksa ya da bir etiket yöneticisi üzerinden kuruyorsanız bu yolu kullanın. Kurulum sayfasındaki bloğu HTML'inize, kapanan body etiketinden hemen önce yapıştırın. İlk betik ARCY'nin yükleyicisidir: ortamınızın token'ını zaten taşır, eşzamansız yüklenir, yüklenme bitmeden yapılan çağrıları sıraya alır ve hiç düzenlenmez. İkinci betik sizindir.

html

<script>
  supabase.auth.getUser().then(({ data: { user } }) => {
    if (!user) return
    arcy.identify(user.id, {
      user_first_name: user.user_metadata.first_name,
      user_last_name: user.user_metadata.last_name,
      user_email: user.email,
      user_signed_up_at: user.created_at,
    })
  })
</script>

Bu, sayfanızın zaten oluşturduğu Supabase istemcisini kullanır, o betiği bunun üstünde tutun.

html

<script>
  firebase.auth().onAuthStateChanged((user) => {
    if (!user) return
    arcy.identify(user.uid, {
      user_first_name: user.displayName,
      user_email: user.email,
      user_signed_up_at: user.metadata.creationTime
        ? new Date(user.metadata.creationTime).toISOString()
        : undefined,
    })
  })
</script>

Bu, script etiketiyle gelen Firebase SDK'sıdır, Firebase betiklerinizi bunun üstünde tutun.

html

<script>
  arcy.identify("USER_ID", {
    user_first_name: "USER_FIRST_NAME",
    user_last_name: "USER_LAST_NAME",
    user_email: "USER_EMAIL",
    user_signed_up_at: "USER_SIGNED_UP_AT",
  })
</script>

HTML kod parçacığını ve paketi asla aynı sayfaya koymayın. Birini seçin.

init() içindeki token tek bir ortama aittir. Herkese açıktır ve sayfa kaynağınızda görünür; yayına almak güvenlidir. Her ortamın kendi token'ı vardır. Öteki ortamın token'ı için panelin üst satırında Development ile Production arasında geçin.

Yer tutucuları değiştirin

Yer tutucu yalnızca Kendi kimlik sistemim (Zustand, Redux vb.) ve Diğer seçeneklerinde kalır. Clerk, Auth.js, Supabase ve Firebase kullanıcıyı kendi oturumundan okur; bunlardan birini seçtiyseniz doğrudan sonraki adıma geçin.

Her yer tutucuyu oturum kodunuzdaki gerçek, dinamik bir değerle değiştirin. Yoksa her ziyaretçi aynı kişi olarak görünür:

Yer tutucu	Anlamı
`USER_ID`	Oturum açan kullanıcının kendi veritabanınızdaki kimliği
`USER_FIRST_NAME`	Kullanıcının adı, dinamik bir değer olarak
`USER_LAST_NAME`	Kullanıcının soyadı, dinamik bir değer olarak
`USER_EMAIL`	Kullanıcının gerçek e-postası, dinamik bir değer olarak
`USER_SIGNED_UP_AT`	Kullanıcının kayıt tarihi. ISO 8601, örn. `2019-12-11T12:34:56Z`

Kurulumu doğrulayın

Gerçek sayfayı bir tarayıcıda açın. Yapılandır > Kurulum sayfası seçili ortamdan gelen trafiği kendiliğinden bekler, geldiğinde doğrular, gelmiyorsa nedenini adıyla söyler. Her sonucun çözümü Sorun giderme sayfasındadır.

İsteğe bağlı adımlar

Özel öznitelikler ekleyin

identify() çağrısına geçirdiğiniz öznitelikler ARCY'nin neyi çıkarabileceğini belirler. Risk altındaki gelir için plan_value ve plan_cycle, hesap bazlı toplamlar için organization_id gönderin. Her anahtarı göndermeden önce Yapılandır > Öznitelikler sayfasında tanımlamalısınız. Tanımsız bir anahtar düşer, hiçbir zaman saklanmaz; kart numarasına, banka hesap numarasına (IBAN) ya da API anahtarına benzeyen bir değer de öyle.

Kimlik doğrulama için kullanıcı kimliklerini imzalayın

İmza olmadan herkes tarayıcı konsoluna arcy.identify("baskasinin-kimligi") yazıp o kişinin konuşmalarını okuyabilir. Sunucunuz her kullanıcı kimliğini ortamın Secret değeriyle imzalar, tarayıcı imzayı çağrıya ekler. Secret'ın nerede gösterildiği ve yenilemenin ne yaptığı API anahtarları sayfasındadır.

Secret sunucu tarafı bir kimlik bilgisidir. Ön yüz koduna, tarayıcıya ulaşan bir derleme değişkenine, bir mobil pakete ya da bir kod deposuna asla koymayın. Secret'ı elinde tutan herkes her kullanıcı kimliğini imzalayabilir.

İmza, kullanıcı kimliğinin Secret ile anahtarlanmış, onaltılık kodlanmış HMAC-SHA256 özetidir. Yalnızca kullanıcı kimliğini kapsar, öznitelikleri kapsamaz; Intercom ve Segment'in kullandığı tarifle aynıdır. identify() çağrısına geçirdiğiniz metnin aynısını imzalayın: kimlikleriniz tam sayıysa ve arcy.identify(String(user.id)) çağırıyorsanız String(user.id) değerini imzalayın.

Sayfa hangi ortamın token'ıyla çalışıyorsa o ortamın Secret'ıyla imzalayın: ARCY_TOKEN ile ARCY_SECRET, ARCY_DEV_TOKEN ile ARCY_DEV_SECRET. Secret henüz tanımlı değilse userHash göndermeyin. Kimlik doğrulamayı zorunlu tut ayarı kapalıyken çağrı yine çalışır.

import { createHmac } from "node:crypto"

const userHash = createHmac("sha256", process.env.ARCY_SECRET)
  .update(String(user.id))
  .digest("hex")

python

import hashlib, hmac, os

user_hash = hmac.new(
    os.environ["ARCY_SECRET"].encode("utf-8"),
    str(user.id).encode("utf-8"),
    hashlib.sha256,
).hexdigest()

ruby

user_hash = OpenSSL::HMAC.hexdigest("SHA256", ENV["ARCY_SECRET"], user.id.to_s)

php

$userHash = hash_hmac('sha256', (string) $userId, getenv('ARCY_SECRET'));

Sonucu identify() çağrısının üçüncü argümanında geçirin:

arcy.identify("USER_ID", {
  user_first_name: "USER_FIRST_NAME",
  user_email: "USER_EMAIL",
}, {
  userHash: "USER_HASH", // sunucunuzda hesaplanır, tarayıcıda asla
})

identifyAnonymous() ve updateUser() imza almaz. Kimlik doğrulamayı zorunlu tut ayarını açmadığınız sürece imzalar denetlenir ve kaydedilir, ancak kimse geri çevrilmez. Kontrolleri Kimlik doğrulama sayfasında izleyin; geçtiklerini görünce ayarı açın.

Giriş, profil değişikliği ve çıkışı izleyin

ARCY çağrılarını her çıkış düğmesinden ya da profil formundan değil, geçerli kullanıcıyı izleyen tek bir yerden yapın. Böylece sonradan eklenen bir yol gözden kaçmaz:

Geçerli kullanıcı	Çağrı
Henüz göndermediğiniz bir kullanıcı kimliği	`identify(id, attributes, { userHash })`
Aynı kimlik, planı ya da rolü değişmiş	`updateUser(changedAttributes)`
Az önce bir kullanıcı vardı, artık yok	`reset()`
Baştan beri kullanıcı yok	`identifyAnonymous()`

reset() çağrılmazsa ortak bir tarayıcıda sonraki kişi önceki kullanıcının kimliğini ve konuşmasını devralır. Düz HTML bir sitede her sayfa yüklemesinde identify() ya da identifyAnonymous() çağırın. reset() çağrısını ise çıkış bağlantınıza, sayfa değişmeden önce çalışacak biçimde ekleyin.

Olaylarınızı bildirin

Olayı Olaylar sayfasında tanımlayın, sonra yazılım ürününüz işlemin başarıyla tamamlandığını bildiği anda arcy.track(name) çağırın: kayıt tamamlandı, ilk proje oluşturuldu, davet gönderildi, ödeme alındı. Çağrıyı işlemi başlatan tıklamada değil, başarıdan sonra yapın. Tanımlı olmayan bir ad düşürülür. Önce tanımlayın, adı da o sayfada göründüğü gibi yazın.

arcy.track("project_created")

Oturum açmamış ziyaretçilere hizmet verin

Herkese açık sayfalarda identify() yerine arcy.identifyAnonymous() çağırın. Ziyaretçiye, alan adınızdaki birinci taraf bir çerezde saklanan bir kimlik verilir; geri gelen ziyaretçi oturumlar ve alt alan adları boyunca aynı kişi sayılır. Anonim ziyaretçinin sohbet yanıtları, kimliği doğrulanmış kullanıcınınkiyle aynı yapay zeka kredisinden düşer; sınırı Çalışma alanı ayarları > Limitler sayfasında koyun.

Etiket yöneticisiyle kurulum

HTML yolu Google Tag Manager ve benzeri araçlarda değişmeden çalışır:

Bir Custom HTML etiketi oluşturun.
Kurulum sayfasındaki HTML kod parçacığının tamamını, iki betikle birlikte, yapıştırın.
Etiketi tüm sayfalarda tetikleyin ve kapsayıcıyı yayımlayın.

Yükleyici ikinci bir başlatmayı yoksayar; iki kez tetiklenen bir etiket zarar vermez. Electron ve yükleyiciyi kendi sunucunuzda barındırma desteklenmez. Bir Electron renderer'ı npm yolunu kullanabilir.