<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Esse é outro post super rapidinho, mas trazendo uma dica que considero bem útil.   É possível que você siga meu blog e siga vários outros também, certo? E aí, como faz para se manter atualizado? Para ver se tem post novo ou não?</p>
<p>A maioria vai dizer que abre o blog sempre, para num perder os posts novos. Mas convenhamos, é meio complicado ficar lembrando de abrir sempre né?</p>
<p>E se eu dissesse que existem apps/extensões que te ajudam nessa tarefa e te avisam assim que um post fresquinho sai, não só em um blog, mas em todos que você quiser?</p>
<h2 id="agregadores-de-conteúdo"><a href="#agregadores-de-conte%C3%BAdo" class="anchor">Agregadores de conteúdo</a></h2>
<p>Esses apps são chamados de agregadores de conteúdo, basta você passar um site (que seja compatível com RSS, ou seja, tenha um <code>xml</code> do conteúdo) e o agregador vai adicionar aquele blog na lista e vai mostrar, os posts antigos e também avisar quando tiverem posts novos!</p>
<p>Um que eu utilizo e indico é o <a href="https://feedly.com/">Feedly</a>, dentro dele, basta digitar o título do site ou a url, e o blog sendo compatível, ele já disponibiliza a opção de adicionar, segue abaixo um screenshot disso:</p>
<p><img src="/assets/img/feedly-add.png" alt="Um screenshot de um input com &#x22;Willian Justen&#x22; digitado e então abaixo uma sugestão do blog."></p>
<p>Depois de adicionado o blog, ele irá aparecer na lateral, junto com todos os outros sites e você vai ver dentro da lista de posts, todos os posts novos que forem aparecendo. Abaixo uma foto dessa lista:</p>
<p><img src="/assets/img/feedly-lista.png" alt="Lista com vários blogs e vários posts"></p>
<h2 id="conclusão"><a href="#conclus%C3%A3o" class="anchor">Conclusão</a></h2>
<p>Como falei, esse seria um post extremamente rápido e simples, mas espero que a dica seja útil para ti. Assim você não perde nenhum post meu! =D</p>
<p>Se você já usa um agregador, mas não é o feedly, coloca aí nos comentários qual é e sua experiência com ele.</p>


Como não perder nenhum post dos seus blogs favoritos.

Usando um agregador de conteúdo

## Introdução

Fala pessoal, o post de hoje será sobre um assunto que eu gosto demais, **métricas!** Vira e mexe eu posto algumas coisinhas no meu [Twitter](https://twitter.com/Willian_justen) sobre estatísticas do blog e até mesmo em outros trabalhos, eu era vidrado em analisar dados. Sejam dados de performance, acessos e outras coisinhas mais.

Na maioria das vezes, eu faço essas métricas por curiosidade e elas não tem nenhum objetivo final. Mas essas métricas são extremamente importantes, principalmente se você tem um negócio próprio e deseja medir sua performance de vendas, atração de novos usuários e etc. Então por isso que irei falar sobre isso =)

Enquanto eu escrevo esse post vou ouvindo um músico/youtuber que encontrei por acaso no Spotify, ele faz músicas instrumentais muito boas! Se curte rock instrumental, vai no [perfil dele no Spotify](https://open.spotify.com/artist/4vnQIQmsGTMXSQy3B5ElAw?si=INHTMGSZRsSjirgq7ohA6Q).

## O que são esses eventos?

Antes de falar como usar, é melhor explicar o que são né? A explicação mais simples é:

> Evento é uma interação/atividade do usuário com elementos da página, pode ser desde a simples `view` até interações mais diretas, como o clique ou submissão de um formulário.

Alguns exemplos de interação seriam:

* View de uma página
* Clique num link de menu
* Uma busca no site
* Play num vídeo
* Download de um pdf
* Play de um podcast
* Scroll da página

Enfim, você pode mensurar qualquer tipo de interação que o usuário tenha no seu site!

## Qual a importância disso?

Se até agora você não viu a importância disso, vou dar alguns exemplos para ajudar.

### Situação 1:

> Você tem um site onde publica seus podcasts e quer saber quantas pessoas entram na página e quantas de fato botam para tocar o episódio.

### Situação 2:

> Você tem um blog e deseja saber se as pessoas fazem de fato a leitura do post. Você pode analisar a porcentagem de scroll que eles fazem na página, assim é possível ter uma métrica melhor do que só a view.

### Situação 3:

> Você tem um ecommerce online e deseja saber a porcentagem de pessoas que adicionam coisas no carrinho, mas não finalizam. Você pode adicionar um evento no botão de adicionar ao carrinho e analisar contra as vendas e assim vai ter dados melhores também.

Enfim, são **infinitas** as possibilidades de métricas que você pode criar e analisar e os ganhos são imensos!

## A estrutura dos eventos

O Google Analytics tem uma estrutura bem definida dos eventos, o que facilita demais para podermos criá-los e criar métricas em cima deles. Essa estrutura é formada por **5 dados**:

### Event Category

Esse é o nome dado para um grupo de eventos similares que você deseja rastrear. Exemplo: eu tenho uma [página de cursos](https://willianjusten.com.br/cursos/) e quero analisar o clique nos cursos. Todos os eventos ficam na categoria "cursos" então. Assim como os links de curso que tenho.

### Event Action

Como o nome já diz, essa é a ação que você está rastreando. Exemplos: play de vídeo, clique num curso, clique num link do menu, scroll de uma página.

### Event Label

Aqui é onde você especifica melhor o evento em si. Por exemplo, no caso dos meus cursos, é aqui que eu defino o nome do curso que foi clicado. Assim eu consigo através do `category` ver todos os cliques nos cursos e aqui eu consigo ver curso a curso de forma mais específica. Assim eu consigo saber qual o curso mais clicado, por exemplo.

### Event Value

Esse é um valor **numérico**, que você assinala ao evento que está rastreando. Geralmente é associado a um valor monetário. Exemplo: o valor do produto que foi adicionado ao carrinho, valor que o download de um pdf significa, etc.

### Non Interaction

Esse é o último parâmetro que você passa no evento. Como disse lá acima, evento pode ser uma interação ou atividade do usuário. Para informar se esse evento é interativo ou não, você passa esse último parâmetro, iremos entrar em mais detalhes da implementação logo abaixo.

## Implementando o Google Analytics

A primeira das coisas e mais óbvia é que você precisa criar uma conta no [Google Analytics](https://analytics.google.com/analytics/web/) e o processo, como mostrado na imagem abaixo, são basicamente 3 etapas:

![Uma imagem mostrando as 3 etapas do Google Analytics. Você primeiro passa alguns dados, vai receber um script para colocar no site e depois é só aguardar e ver os dados no site do analytics.](/assets/img/google-analytics-tracker.png)

Esse código de acompanhamento é bem famoso, e fica parecido com o abaixo:

```html

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-58087941-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'XX-XXXXXXXX-X');
</script>

```

O mais importante desse script é o seu **tracking code**, que ali está representado por `XX-XXXXXXXX-X`.

No meu caso, como eu uso o Gatsby, existe o [gatsby-plugin-google-analytics](https://www.gatsbyjs.org/docs/adding-analytics/), e aí a configuração fica:

```js

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // replace "XX-XXXXXXXX-X" with your own Tracking ID
        trackingId: "XX-XXXXXXXX-X",
      },
    },
  ],
}
```

## Implementando os eventos

Como eu já disse tudo sobre a estrutura ali acima, então fica muito fácil de implementar! A sintaxe é a seguinte:

```js
ga('send', {
  hitType: 'event',
  eventCategory: [Category],
  eventAction: [Action],
  eventLabel: [Label],
  eventValue: [Value],
  nonInteractive: [True | False]
});
```

Como a ordem dos parâmetros é sempre a mesma, você pode simplificar mais e colocar só:

```js
ga('send', 'event', 'Category', 'Action', 'Label', 'Value');
```

Okay, o código é esse, mas como e onde você coloca? Vamos a alguns exemplos:

Em eventos de `click`, onde são geralmente botões, você pode fazer até inline como:

```html
<a href="/foo" onclick="ga('send', 'event', 'Category', 'click', 'Label', 'Value');">Ir para Foo</a>
```

Se for algum evento de view, você pode colocar também diretamente na página, com um script inline:

```html
<script>
ga('send', 'event', 'Category', 'View', 'Label', 'Value', nonInteractive: true);
</script>
```

E se for algum evento ligado a um scroll, por exemplo, você pode adicionar diretamente no seu script, só lembrando de verificar a existência do `window.ga`, algo como:

```js

document.addEventListener('scroll', () => {
  if typeof window.ga !== undefined {
     // sua implementação aqui e mais o evento
     ga('send', 'event', 'Category', 'Scroll', 'Label', 'Value');
  }
})
```

## Como eu faço no Gatsby/React?

Existe um plugin chamado [React GA](https://github.com/react-ga/react-ga), que já facilita com todas as configurações necessárias para mim. E aí no exemplo da minha página de cursos, basta eu fazer o seguinte código:

```jsx
const courseClickTrack = title => {
  ReactGA.event({
    category: 'cursos',
    action: 'click',
    label: `Link Curso - ${title}`
  })
}

const Course = ({ title, description, link, image }) => {
  return (
    <S.CourseLink href={link} onClick={() => courseClickTrack(title)}>
      <S.CourseWrapper>
        <Image filename={image} alt={title} />
        <S.CourseInfo>
          <S.CourseTitle>{title}</S.CourseTitle>
          <S.CourseDescription>{description}</S.CourseDescription>
        </S.CourseInfo>
      </S.CourseWrapper>
    </S.CourseLink>
  )
}
```

Repare que no `onClick` do React eu ainda passo o `title` para que assim a minha `label` tenha diferentes valores para cada curso.

E eu faço isso para outras coisas, como podem ver [nesse tweet](https://twitter.com/Willian_justen/status/1151614625768755207). Então, se quiserem ver os trackers que eu uso, só acessar o [código fonte do blog](https://github.com/willianjusten/willianjusten.com.br/).

## Conclusão, Agradecimento e chamada para Open Source

É isso pessoal, espero que esse post ajude você a conseguir criar métricas mais legais e interessantes para os seus próximos sites. E se você tiver outras sugestões, não deixe de falar ali nos comentários ou no Twitter.

E para continuar, quero fazer um agradecimento ao [Luciano Carvalho](https://github.com/lucianocarvalho) que achou links quebrados no blog e não só avisou, como fez [um Pull Request](https://github.com/willianjusten/willianjusten.com.br/pull/110) corrigindo. 

Outras pessoas avisaram coisas via Twitter também e até fizeram sugestões, fica aqui meu obrigado a todos vocês! <3

E se você está começando na área e não sabe como iniciar, está aí uma oportunidade! O meu blog inteiro é open source e você pode ajudar na revisão dos artigos, melhorias de código e até inclusão de features que você acha que seria legal ter. Não perde a oportunidade e [vai lá no Github agora](https://github.com/willianjusten/willianjusten.com.br).

Qual a importância de rastrear eventos no seu site e como fazer isso de forma simples.

Como usar o Google Analytics Events Tracker?


## Introdução

Fala pessoal, uma coisa que pediam muito enquanto eu estava meio parado, eram dicas e coisas com CSS. Pois então, vamos voltar a fazer mais posts para a [série de dicas de CSS](https://willianjusten.com.br/series/#dicas-de-css).

A dica de hoje é extremamente simples, mas bem interessante, nós vamos aprender a criar um efeito que é usado em vários sites famosos, que é o chamado fullpage scroll ou onepage scroll. Ele nada mais é que uma adaptação do scroll, que faz com que ao você dar scroll, ele "mova uma tela inteira de uma vez só".

Bom, enquanto escrevo esse post, eu vou ouvindo o [Unplugged MTV do Alice in Chains](https://open.spotify.com/album/5PdgIAHzwDvTZRjIGSQGtN?si=FA3a1dtIQnmRZH_c50E0Xg), na minha opinião, é um dos melhores Unplugged que já ouvi, e olha que existem muitos bons.

## Demo

Se você quiser ver logo o negócio funcionando, seguem aqui as 3 diferentes demos:

- [Vertical](https://labs.willianjusten.com.br/scroll-snap/vertical)
- [Horizontal](https://labs.willianjusten.com.br/scroll-snap/horizontal)
- [Proximity](https://labs.willianjusten.com.br/scroll-snap/proximity)

Abaixo segue um gif do exemplo vertical, para você já entender o que faremos.

![Fotos de paisagens na Austria sendo scrolladas verticalmente](/assets/scroll-snap.gif)

## Plugins famosos e sites que usam

Como disse, vários sites usam essa técnica, mas eles acabam caindo em plugins JS. Que são os casos do:

- [FullPage](https://alvarotrigo.com/fullPage/)
- [One Page Scroll](http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
- [RevealJS](https://revealjs.com/#/)

E aí, eu separei alguns sites bem legais que usam:

- [BBC - Partition of India Article](https://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02)
- [One Month Off - Indonesia](https://readymag.com/repponen/20907/10/)
- [Coca Cola Annual Review](https://www.coca-colacompany.com/annual-review/2017/index.html)

E quanto ao [RevealJS](https://revealjs.com/#/), existem várias apresentações de dev por aí usando ele. Já pensou, agora você pode fazer suas apresentações usando só css simples para passar os slides! =D

## Mas e como fazer isso só com CSS?

Existe um conjunto de propriedades chamadas [CSS Scroll Snap](https://caniuse.com/#feat=css-snappoints), que já é até bem antigo, mas vem ganhando compatibilidade com os browsers aos poucos. E algumas dessas propriedades, que é o caso do [scroll-snap-type](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) já é bastante compatível e já faz o efeito que precisamos.

A sintaxe mudou um pouco e agora está ainda mais simples de usar, então vamos ver como que faz.

### Criando o Markup

Basicamente precisamos criar um `.container` e então as `sections`, que irão ocupar toda a página e para ter as imagens, utilizaremos diferentes `backgrounds`, então a forma mais simples fica assim:

```html
<div class="container">
  <section class="one">
    <div class="description">
      <p>
        Um caminho qualquer em Bad Ausee, uma cidade na região da Estíria que
        tem pouco mais de 5 mil habitantes.
      </p>
    </div>
  </section>
  <section class="two">
    <div class="description">
      <p>
        A caminho da cidade de Hallstatt, conhecida como uma das mais bonitas do
        mundo. Para chegar lá, somente de barco ou dando uma grande volta pelo
        lago de mesmo nome.
      </p>
    </div>
  </section>
  <section class="three">
    <div class="description">
      <p>
        As margens do lago Autaussee. Esse dia fazia apenas 10 graus negativos,
        mas eu queria muito passear e explorar todos os lugares.
      </p>
    </div>
  </section>
  <section class="four">
    <div class="description">
      <p>
        Mais uma foto do mesmo barco que leva a Hallstatt, mas dessa vez do meu
        drone, amo como a reflexão ficou tão azul em contraste com as montanhas.
      </p>
    </div>
  </section>
  <section class="five">
    <div class="description">
      <p>
        Momentos antes do pôr-do-sol visto de Hallstatt. Essa cadeia de
        montanhas é realmente maravilhosa!
      </p>
    </div>
  </section>
</div>
```

Cada `section` tem uma classe específica, assim conseguimos adicionar diferentes backgrounds para cada um.

### Criando o CSS base para as sections

Antes de fazer o scroll funcionar, vamos criar os estilos para as seções ficarem fullscreen e a caixa da descrição da foto. Para ocupar a tela inteira vamos utilizar as propriedades `vw` e `vh`, que são unidades de viewport, eu falo [mais sobre elas aqui](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/). Segue abaixo o css:

```css
section {
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100vh;
}

.description {
  background: rgba(0, 0, 0, 0.3);
  bottom: 1rem;
  color: white;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 250px;
  padding: 2rem;
  position: absolute;
  right: 1rem;
}

.one {
  background-image: url('./img/one.jpg');
}
.two {
  background-image: url('./img/two.jpg');
}
.three {
  background-image: url('./img/three.jpg');
}
.four {
  background-image: url('./img/four.jpg');
}
.five {
  background-image: url('./img/five.jpg');
}
```

### Agora a mágica do CSS

Basicamente precisamos dizer ao nosso `.container`, que ele vai ter esse controle de scroll, utilizando a propriedade `scroll-snap-type`. Ela recebe 2 parâmetros que podem ser `scroll-snap-type: x|y|both mandatory|proximity`.

O primeiro parâmetro indica para onde será o scroll, `x` para o scroll horizontal, `y` para scroll vertical e `both` se for para os dois eixos. Já o segundo parâmetro indica como funcionará o scroll.

O `mandatory` diz que pelo simples fato de você mover um pouco o scroll, ele já irá para o próximo "slide", já o `proximity`, ele vai calcular qual está mais próximo, se você mover só um pouco ele vai voltar a centralizar o slide atual.

Então para fazer os slides mudarem de forma horizontal, usaremos da seguinte forma:

```css
.container {
  scroll-snap-type: x mandatory;
  display: flex;
}

section {
  scroll-snap-align: start;
}
```

Passando a propriedade `scroll-snap-align`, a gente diz em qual parte do slider queremos que o scroll pare e alinhe, como é uma página inteira, faz mais sentido ser no `start`, mas existem também as opções de `end` e `center`.

E pronto! Já está funcionando! Sim, só isso, não precisa de mais nadinha! Você pode ver o exemplo do [horizontal aqui](https://labs.willianjusten.com.br/scroll-snap/horizontal) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/horizontal.html).

Para o exemplo na vertical, basta trocar o eixo de `x` para `y`, ficando `scroll-snap-type: y mandatory;`. Você pode ver exemplo do [vertical aqui](https://labs.willianjusten.com.br/scroll-snap/vertical) e se quiser ver o [código inteiro](https://github.com/willianjusten/labs/blob/gh-pages/scroll-snap/vertical.html).

## Conclusão

A dica de hoje foi super rápida e simples, mas é possível que muita gente não conheça essa propriedade, então é legal passar adiante. Vou continuar postando algumas outras dicas com CSS para criar soluções que usamos no nosso dia a dia. Se vocês tem alguma coisa específica em mente, deixa aí nos comentários ou manda lá no [Twitter](https://twitter.com/Willian_justen) que eu posso estar fazendo.


Criando fullpage scroll com simples linhas de CSS.

Willian JustenSoftware Engineer

Introdução

Agregadores de conteúdo

Conclusão