> ## Documentation Index
> Fetch the complete documentation index at: https://docs.affiliatus.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Page View

> Rastreamento de visitas e visualizações de página

## Descrição

O evento **`page_view`** rastreia quando um visitante acessa uma página através do link de um afiliado. Este é o **primeiro ponto de contato** no funil de conversão e é essencial para:

* **Medir o alcance** dos afiliados
* **Calcular taxas de conversão** (leads/visitas e vendas/visitas)
* **Identificar páginas populares** na jornada do usuário
* **Analisar padrões de navegação** dos visitantes

***

## Quando Usar

<CardGroup cols={2}>
  <Card title="Automaticamente" icon="robot">
    Ao carregar o SDK JavaScript com `autoPageView: true` (padrão)
  </Card>

  {" "}

  <Card title="Manualmente" icon="hand-pointer">
    Em navegações SPA (React, Vue, Angular)
  </Card>

  {" "}

  <Card title="Landing Pages" icon="browser">
    Para rastrear visualizações de páginas específicas
  </Card>

  <Card title="Engajamento" icon="chart-line">
    Ao medir interações em páginas de produto/serviço
  </Card>
</CardGroup>

***

## Propriedades Suportadas

<ParamField body="url" type="string" required>
  URL completa da página visitada **Exemplo:** `https://seu-site.com/produto`
</ParamField>

<ParamField body="title" type="string">
  Título da página (`document.title`) **Exemplo:** `"Produto Premium - Sua
      Empresa"`
</ParamField>

<ParamField body="referrer" type="string">
  URL de origem do visitante (`document.referrer`) **Exemplo:**
  `"https://google.com"`
</ParamField>

<ParamField body="timestamp" type="string">
  Data/hora ISO 8601 da visualização **Exemplo:** `"2024-01-15T10:30:00Z"`
</ParamField>

<ParamField body="page" type="string">
  Identificador customizado da página **Exemplo:** `"home"`, `"pricing"`,
  `"checkout"`
</ParamField>

***

## Exemplos de Implementação

### SDK JavaScript - Rastreamento Automático

```javascript theme={null}
// Page view enviado automaticamente ao carregar
const affiliatus = new Affiliatus("seu-campaign-id");
// Pronto! Não precisa fazer mais nada.
```

### SDK JavaScript - Rastreamento Manual

```javascript theme={null}
const affiliatus = new Affiliatus("seu-campaign-id", {
  autoPageView: false, // Desabilitar automático
});

// Rastrear manualmente
affiliatus.trackPageView({
  page: "pricing",
  url: window.location.href,
  title: document.title,
});
```

### Single Page Application (SPA)

<CodeGroup>
  ```javascript React Router theme={null}
  import { useEffect } from "react";
  import { useLocation } from "react-router-dom";

  function App() {
    const location = useLocation();

    useEffect(() => {
      // Rastrear mudança de rota
      affiliatus.trackPageView({
        page: location.pathname,
        url: window.location.href,
        title: document.title,
      });
    }, [location]);

    return <Router>{/* ... */}</Router>;
  }
  ```

  ```javascript Vue Router theme={null}
  // router/index.js
  import { createRouter } from "vue-router";

  const router = createRouter({
    // ...
  });

  router.afterEach((to, from) => {
    affiliatus.trackPageView({
      page: to.name,
      url: window.location.href,
      title: document.title,
    });
  });

  export default router;
  ```

  ```javascript Next.js App Router theme={null}
  "use client";
  import { usePathname } from "next/navigation";
  import { useEffect } from "react";

  export function AffiliateTracker() {
    const pathname = usePathname();

    useEffect(() => {
      affiliatus.trackPageView({
        page: pathname,
        url: window.location.href,
        title: document.title,
      });
    }, [pathname]);

    return null;
  }
  ```
</CodeGroup>

### API REST - Backend Integration

```javascript Node.js theme={null}
// Rastreamento server-side
app.get("/produto/:id", async (req, res) => {
  const affiliateId = req.cookies.affiliate_id;
  const sessionId = req.cookies.session_id;

  if (affiliateId) {
    await fetch("https://api.affiliatus.io/v1/events", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-API-Key": process.env.AFFILIATUS_API_KEY,
      },
      body: JSON.stringify({
        events: [
          {
            event_type: "page_view",
            campaign_id: process.env.CAMPAIGN_ID,
            affiliate_id: affiliateId,
            session_id: sessionId,
            properties: {
              url: `${req.protocol}://${req.get("host")}${req.originalUrl}`,
              title: "Página do Produto",
              page: "product-details",
            },
            device_info: {
              user_agent: req.headers["user-agent"],
              language: req.headers["accept-language"],
              ip: req.ip,
            },
          },
        ],
      }),
    });
  }

  res.render("produto", { id: req.params.id });
});
```

### PHP - Server-side Tracking

```php theme={null}
<?php
// Rastreamento server-side de page view
function trackPageView($affiliateId, $sessionId, $pageTitle) {
    $data = [
        'events' => [[
            'event_type' => 'page_view',
            'campaign_id' => $_ENV['CAMPAIGN_ID'],
            'affiliate_id' => $affiliateId,
            'session_id' => $sessionId,
            'properties' => [
                'url' => $_SERVER['REQUEST_URI'],
                'title' => $pageTitle,
                'referrer' => $_SERVER['HTTP_REFERER'] ?? '',
                'page' => basename($_SERVER['PHP_SELF'], '.php')
            ],
            'device_info' => [
                'user_agent' => $_SERVER['HTTP_USER_AGENT'],
                'ip' => $_SERVER['REMOTE_ADDR'],
                'language' => $_SERVER['HTTP_ACCEPT_LANGUAGE'] ?? 'pt-BR'
            ]
        ]]
    ];

    $ch = curl_init('https://api.affiliatus.io/v1/events');
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        'Content-Type: application/json',
        'X-API-Key: ' . $_ENV['AFFILIATUS_API_KEY']
    ]);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_exec($ch);
    curl_close($ch);
}

// Usar no início de cada página
$affiliateId = $_COOKIE['affiliate_id'] ?? null;
$sessionId = $_COOKIE['session_id'] ?? null;

if ($affiliateId) {
    trackPageView($affiliateId, $sessionId, 'Página de Produto');
}
?>
```

***

## Métricas Geradas

O evento Page View gera as seguintes métricas no dashboard:

<CardGroup cols={2}>
  <Card title="Total de Visitas" icon="eye">
    Número total de page views por afiliado
  </Card>

  {" "}

  <Card title="Taxa de Rejeição" icon="chart-line">
    Percentual de visitas sem lead/conversão
  </Card>

  {" "}

  <Card title="Páginas Mais Visitadas" icon="ranking-star">
    Quais páginas geram mais tráfego
  </Card>

  {" "}

  <Card title="Origem do Tráfego" icon="arrow-right-to-bracket">
    De onde vêm os visitantes (via referrer)
  </Card>

  {" "}

  <Card title="Engajamento" icon="clock">
    Tempo entre visitas e conversões
  </Card>

  <Card title="Taxa de Conversão" icon="percentage">
    Page Views → Leads → Conversions
  </Card>
</CardGroup>

***

## Boas Práticas

<AccordionGroup>
  <Accordion title="Evite page views duplicados em SPAs" icon="triangle-exclamation">
    Em React/Vue/Angular, desative `autoPageView: false` e rastreie manualmente nas transições de rota para evitar duplicatas.

    ```javascript theme={null}
    const affiliatus = new Affiliatus('campaign-id', {
      autoPageView: false
    });
    ```
  </Accordion>

  <Accordion title="Inclua informações de contexto" icon="tags">
    Adicione propriedades como `page`, `section`, `category` para análises mais ricas.

    ```javascript theme={null}
    affiliatus.trackPageView({
      page: 'product-details',
      section: 'ecommerce',
      category: 'electronics',
      product_id: '12345'
    });
    ```
  </Accordion>

  <Accordion title="Rastreie páginas importantes" icon="star">
    Foque em páginas que indicam intenção de compra: pricing, features, demo. Não rastreie TODAS as páginas.

    **Páginas importantes:**

    * Home
    * Pricing
    * Features
    * Product Details
    * Checkout

    **Evite rastrear:**

    * Páginas de erro
    * Política de privacidade
    * Termos de uso
  </Accordion>

  <Accordion title="Use identificadores consistentes" icon="fingerprint">
    Use sempre o mesmo formato para a propriedade `page` para facilitar análises.

    ```javascript theme={null}
    // <Icon icon="check" color="#db2777" /> BOM - consistente
    page: 'home'
    page: 'pricing'
    page: 'product-details'

    // <Icon icon="x" /> RUIM - inconsistente
    page: 'Home Page'
    page: '/pricing/'
    page: 'ProductDetails'
    ```
  </Accordion>
</AccordionGroup>

***

## Troubleshooting

### Page views não aparecem no dashboard

<Steps>
  <Step title="Verifique se a campanha está ativa">
    Status deve ser `active`, não `draft` ou `paused`
  </Step>

  <Step title="Confirme se o affiliate_id existe">
    O código de referência deve estar cadastrado e com status `active`
  </Step>

  <Step title="Valide o domain">
    O domínio de origem deve estar na lista de domínios permitidos da campanha
  </Step>

  <Step title="Cheque os logs de erro">
    Abra DevTools (F12) → Console para ver erros do SDK

    ```javascript theme={null}
    // Ativar modo debug
    const affiliatus = new Affiliatus('campaign-id', {
      debug: true
    });
    ```
  </Step>
</Steps>

### Page views duplicados

Se você está vendo page views duplicados, provavelmente está usando SPA sem desabilitar o modo automático:

```javascript theme={null}
// <Icon icon="check" color="#db2777" /> SOLUÇÃO
const affiliatus = new Affiliatus("campaign-id", {
  autoPageView: false, // Desabilitar automático
});

// Rastrear manualmente nas mudanças de rota
router.afterEach(() => {
  affiliatus.trackPageView({
    /* ... */
  });
});
```

***

## Próximos Passos

<CardGroup cols={2}>
  <Card title="Evento Lead" icon="user-plus" href="/guides/event-lead">
    Aprenda sobre o próximo passo do funil
  </Card>

  {" "}

  <Card title="SDK JavaScript" icon="code" href="/integrations/sdk-javascript">
    Guia completo do SDK JavaScript
  </Card>

  {" "}

  <Card title="Enviar Eventos" icon="paper-plane" href="/api-reference/events/send-events">
    Documentação da API REST
  </Card>

  <Card title="Dashboard" icon="chart-line" href="https://app.affiliatus.io">
    Visualize page views em tempo real
  </Card>
</CardGroup>