Como instalar o script

Como Instalar o Script de Rastreamento

Para começar a rastrear dados no seu site usando a Ubitracker, é necessário instalar o script de rastreamento no seu projeto. Siga os passos abaixo para configurar corretamente.

Obtenha o Script

  1. Acesse o seu projeto na Ubitracker.
  2. Logo abaixo do submenu, você encontrará um banner com instruções para instalação do script.
  3. Clique em Copiar para obter o código do script de rastreamento.

Instale o Script no Seu Site

A instalação do script varia conforme o tipo de site que você está utilizando. Aqui estão os exemplos para sites comuns, React, Next.js, e Vue.js:

Para Sites Comuns (HTML, PHP, etc.)

O script deve ser instalado no final da tag <body> ou na <head> com a tag adequada para garantir que ele seja executado somente após o carregamento da página.

Exemplo de instalação no final do <body>:

<!-- Início Código Ubitracker --->
<script type="text/javascript">
    (function(u, b, i, x, t, r) {
        u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
        t = b.createElement(x); 
        t.async = 1; 
        t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
        t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
        r = b.getElementsByTagName(x)[0]; 
        r.parentNode.insertBefore(t, r);
    })(window, document, 'ubitracker', 'script');
</script>
<!-- Fim Código Ubitracker --->

Se preferir instalar na <head>, adicione o atributo defer ou async à tag <script> para que o script seja carregado após o carregamento do restante da página:

<head>
    <!-- Outros elementos da head -->
    <script type="text/javascript" defer>
        (function(u, b, i, x, t, r) {
            u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
            t = b.createElement(x); 
            t.async = 1; 
            t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
            t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
            r = b.getElementsByTagName(x)[0]; 
            r.parentNode.insertBefore(t, r);
        })(window, document, 'ubitracker', 'script');
    </script>
</head>

Para Aplicações React

Se você está utilizando React, o script pode ser adicionado diretamente no arquivo HTML do seu projeto, como o public/index.html, ou dinamicamente na inicialização do seu componente principal.

Exemplo de instalação no index.html:

<!-- Início Código Ubitracker --->
<script type="text/javascript">
    (function(u, b, i, x, t, r) {
        u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
        t = b.createElement(x); 
        t.async = 1; 
        t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
        t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
        r = b.getElementsByTagName(x)[0]; 
        r.parentNode.insertBefore(t, r);
    })(window, document, 'ubitracker', 'script');
</script>
<!-- Fim Código Ubitracker --->

Para Aplicações Next.js (route)

No Next.js, você pode inserir o script de rastreamento diretamente no arquivo _document.js dentro da pasta pages.

Exemplo de instalação no _document.js:

import Document, { Html, Head, Main, NextScript } from 'next/document';
 
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <script
            type="text/javascript"
            dangerouslySetInnerHTML={{
              __html: `
                (function(u, b, i, x, t, r) {
                  u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
                  t = b.createElement(x); 
                  t.async = 1; 
                  t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
                  t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
                  r = b.getElementsByTagName(x)[0]; 
                  r.parentNode.insertBefore(t, r);
                })(window, document, 'ubitracker', 'script');
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
 
export default MyDocument;

Para Aplicações Next.js (app)

Se você está utilizando o padrão app no Next.js, o script de rastreamento pode ser inserido no layout principal da sua aplicação, geralmente localizado no arquivo app/layout.js.

Exemplo de instalação no app/layout.js:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          type="text/javascript"
          dangerouslySetInnerHTML={{
            __html: `
              (function(u, b, i, x, t, r) {
                u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
                t = b.createElement(x); 
                t.async = 1; 
                t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
                t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
                r = b.getElementsByTagName(x)[0]; 
                r.parentNode.insertBefore(t, r);
              })(window, document, 'ubitracker', 'script');
            `,
          }}
        />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
}

Neste exemplo, o script de rastreamento é incluído no <head> do layout principal da aplicação, garantindo que ele seja carregado em todas as páginas da sua aplicação Next.js.

Para Aplicações Vue.js

No Vue.js, você pode adicionar o script de rastreamento diretamente no arquivo index.html ou dinamicamente em um componente Vue.

Exemplo de instalação no public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Vue App</title>
    <!-- Início Código Ubitracker --->
    <script type="text/javascript">
      (function(u, b, i, x, t, r) {
          u[i] = u[i] || function() { (u[i].q = u[i].q || []).push(arguments) };
          t = b.createElement(x); 
          t.async = 1; 
          t.src = "https://mercabilis-medusa.s3.sa-east-1.amazonaws.com/ubitracker/script.min.js";
          t.setAttribute('data-project-id', '{ID-DO-SEU-PROJETO}');
          r = b.getElementsByTagName(x)[0]; 
          r.parentNode.insertBefore(t, r);
      })(window, document, 'ubitracker', 'script');
    </script>
    <!-- Fim Código Ubitracker --->
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Conclusão

A instalação do script de rastreamento da Ubitracker é simples e pode ser feita em poucos minutos. Uma vez instalado corretamente, você poderá começar a coletar dados valiosos sobre suas campanhas e otimizar sua estratégia de marketing digital.

ComeçandoMercado Pago