Web

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.

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).

boolean

Parâmetro opcional para ativar os logs de debug no console.

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)

string

required

Nome do evento (ex: "VIEW_PAGE", "CONTENT_VIEW", "ADD_TO_CART", "CHECKOUT_COMPLETED"). Veja a lista completa em Eventos.

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.

object

Identificadores do usuário utilizados para atribuição de sessões a pedidos. Veja mais em Conceitos - Aliases.

Conectando com a Biblioteca JS

Primeiro, carregue a biblioteca no body página.

body

<script src="https://storage.googleapis.com/solomon-app-scripts/events.min.js"></script>

Inicialize a instância do SDK.

body

<script>
  window.solomon = new SolomonSDK({
    companyId: "SEU_COMPANY_ID",
    debug: true,
    useTouchpoint: true
  });
</script>

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.

Instale o pacote no seu ambiente.

Terminal

npm install @solomon-tech/events

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>
    );
}

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;
};

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;
}

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;

Primeiros passos

Integração da loja virtual

Eventos do site

Inicialização

Método `track`

Conectando com a Biblioteca JS

Conectando com o Pacote do SDK

​Inicialização

​Método track

​Conectando com a Biblioteca JS

​Conectando com o Pacote do SDK

Inicialização

Método `track`

Conectando com a Biblioteca JS

Conectando com o Pacote do SDK