Eventos de Visualização

A visualização é o primeiro contato do seu cliente com a vitrine apresentada. Para coletar esse evento, as URLs são pré montadas no retorno da nossa API e apresentadas através do atributo px. Existem dois momentos em que chamadas utilizando este atributo devem ser feitas:

Visualização da vitrine

A chamada deve ser feita assim que a vitrine entra no campo de visão (viewport) do usuário. Esse dado é localizado pelo data[].px.

Visualização individual do produto

Ele é mais utilizado quando a vitrine possui um slideshow/carrossel. Quando este for o caso, a URL só deve ser chamada quando o produto ficar visível após a passagem de páginas. Sendo assim, será coletado pelo atributo data[].data[].px presente no retorno da API.

A chamada pode ser feita através de uma requisição GET, ou mesmo através de uma tag <img> na página:

Typescript

import axios from 'axios'

const response = {
  //widget info...
  "px": "https://api-ads.percycle.com/v.gif?hash=WIDGET_LONG_STRING",
  //more widget info...
  "data": [
      {
          //product info...
          "px": "https://api-ads.percycle.com/v.gif?hash=PRODUCT_LONG_STRING",
          //more produto info...
      }
  ]
}

//on viewport view...
await axios.get(respose.px)

//on product view...
await Promise.all(response.data.map(product => axios.get(product.px)))

Edit this page on GitHub

Ads/showcase

Ads/click

px attribute location

{
  "v": 2,
  "data": [
    {
      "widget": "native",
      //trigger on viewport view
      "px": "https://api-ads.percycle.com/v.gif?hash=WIDGET_LONG_STRING",
      "data": [
        {
          //trigger on product view
          "px": "https://api-ads.percycle.com/v.gif?hash=PRODUCT_LONG_STRING",
          "title": "Título do produto",
          //...
        },
        {
          //trigger on product view
          "px": "https://api-ads.percycle.com/v.gif?hash=PRODUCT_LONG_STRING",
          "title": "Título do produto 2",
          //...
        }
      ]
    }
  ]
}