Skip to main content
Para conectar-se à Solomon é bastante simples. Primeiro é necessário inicializar o SDK e, uma vez tendo iniciado o SDK, depois você pode chamar a função track para enviar os eventos.

​
Inicialização

A inicialização do SDK requer alguns parâmetros que estão listados abaixo.
​
companyId
string
É o ID de 20 caracteres que a loja possui na Solomon. Encontre o seu em Configurações > Detalhes da Conta > ID da Loja.
O companyId não é a API Key nem o token de autenticação. É um identificador alfanumérico de 20 caracteres visível na tela de detalhes da conta (exemplo: aBcDeFgHiJkLmNoPqRsT).
​
debug
boolean
Parâmetro opcional para ativar os logs de debug no console.
​
useTouchpoint
boolean
Parâmetro opcional para ativar o envio desses eventos para o pixel.
A funcionalidade de atribuição só irá funcionar se os eventos forem enviados para o pixel.

​
Método track

Após a inicialização, o SDK expõe o método track para envio de eventos. A assinatura aceita até três argumentos: 
solomon.track(eventName: string, payload?: object, customAliases?: object)
​
eventName
string
required
Nome do evento (ex: "VIEW_PAGE", "CONTENT_VIEW", "ADD_TO_CART", "CHECKOUT_COMPLETED"). Veja a lista completa em Eventos.
​
payload
object
Dados específicos do evento, como ID do produto ou itens do carrinho. Cada evento possui seu próprio contrato de dados documentado em Eventos.
​
customAliases
object
Identificadores do usuário utilizados para atribuição de sessões a pedidos. Veja mais em Conceitos - Aliases.

​
Conectando com a Biblioteca JS

1
Primeiro, carregue a biblioteca no body página.
body
<script src="https://storage.googleapis.com/solomon-app-scripts/events.min.js"></script>
2
Inicialize a instância do SDK.
body
<script>
  window.solomon = new SolomonSDK({
    companyId: "SEU_COMPANY_ID",
    debug: true,
    useTouchpoint: true
  });
</script>
3
Dispare o evento assim que a página for carregada.
body
<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    window.solomon.track("VIEW_PAGE")
  });
</script>
Note que a chamada track é uma chamada assíncrona, ou seja, não irá retornar nada se não chamar pelo await. O monitoramento de erros deve ser feito por meio do console, com a opção debug ativada na configuração do SDK.

​
Conectando com o Pacote do SDK

Para este exemplo estamos utilizando React, mas a estrutura se mantém em outros frameworks.
1
Instale o pacote no seu ambiente.
Terminal
npm install @solomon-tech/events
2
Comece criando um contexto para a inicialização do SDK.
SolomonContext.tsx
import React, { createContext, useContext, useEffect, useState } from 'react';
import { SolomonSDK } from '@solomon-tech/events';

export const SolomonContext = createContext<SolomonSDK | null>(null);

export function SolomonProvider({ children }: { children: React.ReactNode }) {
    const [sdk, setSdk] = useState<SolomonSDK | null>(null);

    useEffect(() => {
        const instance = new SolomonSDK({
          companyId: 'SEU_COMPANY_ID',
          debug: true,
          useTouchpoint: true,
        });

        setSdk(instance);
    }, []);

    if (!sdk) return null;

    return (
        <TrackContext.Provider value={sdk}>
        {children}
        </TrackContext.Provider>
    );
}
3
Após isso, cria um novo hook que será usado para as chamadas.
useSolomon.tsx
import { SolomonSDK } from "@solomon-tech/events";
import { useContext } from "react";
import { SolomonContext } from "../contexts/SolomonContext";

export const useSolomon = (): SolomonSDK => {
    const context = useContext(SolomonContext);
    if (!context) {
        throw new Error('useSolomon must be used within a SolomonProvider');
    }
    return context;
};
4
Implemente um componente envio do evento de visualização de página.
Tracker.tsx
import { useEffect } from 'react';
import { useSolomon } from '../hooks/useSolomon';

export function PageViewTracker() {
  const solomon = useSolomon();

  useEffect(() => {
    solomon.track("VIEW_PAGE");
  }, [solomon]);

  return null;
}
5
Depois, basta renderizar esse componente uma vez por página ou no layout principal:
App.tsx
import { SolomonProvider } from './contexts/SolomonContext';
import { PageViewTracker } from './components/PageViewTracker';

function App() {
  return (
    <SolomonProvider>
      <PageViewTracker />
      {/* resto da aplicação */}
    </SolomonProvider>
  );
}

export default App;