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.
A inicialização do SDK requer alguns parâmetros que estão listados abaixo.
É o ID de 20 caracteres que a loja possui na Solomon.
Parâmetro opcional para ativar os logs de debug no console.
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.
Primeiro, carregue a biblioteca no body página.<script src="https://storage.googleapis.com/solomon-app-scripts/events.min.js"></script>
Inicialize a instância do SDK.<script>
window.solomon = new SolomonSDK({
companyId: "SEU_COMPANY_ID",
debug: true,
useTouchpoint: true
});
</script>
Dispare o evento assim que a página for carregada.<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.
Para este exemplo estamos utilizando React, mas a estrutura se mantém em outros frameworks.
Instale o pacote no seu ambiente.npm install @solomon-tech/events
Comece criando um contexto para a inicialização do SDK.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>
);
}
Após isso, cria um novo hook que será usado para as chamadas.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;
};
Implemente um componente envio do evento de visualização de página.import { useEffect } from 'react';
import { useSolomon } from '../hooks/useSolomon';
export function PageViewTracker() {
const solomon = useSolomon();
useEffect(() => {
solomon.track("VIEW_PAGE");
}, [solomon]);
return null;
}
Depois, basta renderizar esse componente uma vez por página ou no layout principal:import { SolomonProvider } from './contexts/SolomonContext';
import { PageViewTracker } from './components/PageViewTracker';
function App() {
return (
<SolomonProvider>
<PageViewTracker />
{/* resto da aplicação */}
</SolomonProvider>
);
}
export default App;