# Banner extra com contagem de cliques

Snippet para criar um banner com contador de cliques.\
\
OBS: Exemplo utilizado para o banner extra4

{% tabs %}
{% tab title="HTML" %}

```html
{#
  # Banner com contagem de cliques
  # elements/snippets/banner.html
#}

{% if banners.extra4  %}
<div class="section-banners">

    <div class="item">
        <a{{ banners.extra4.link ? ' href="'~banners.extra4.tracked_link~'" ' }} target="{{ banners.extra4.target }}">
            <img class="lazyload" data-src="{{ banners.extra4.src }}" alt="{{ banners.extra4.alt }}">
        </a>
    </div>
 
</div>
{% endif %}
```

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

Copie o código acima e crie um arquivo separado, exemplo: \
`elements/snippets/banner.html`&#x20;

Faça a chamada desse arquivo onde desejar:

```twig
{% element('snippets/banner') %}
```

{% hint style="warning" %}

### Observação: <a href="#como-usar" id="como-usar"></a>

Em relação ao código HTML inserido acima, a imagem é carregada com o Lazyload. Caso o desenvolvedor não utilize essa opção, o código deve ser com a chamada normal da imagem, conforme exemplo abaixo:
{% endhint %}

{% tabs %}
{% tab title="HTML" %}

```html
{#
  # Banner com contagem de cliques
  # elements/snippets/banner.html
#}

{% if banners.extra4  %}
<div class="section-banners">

    <div class="item">
        <a{{ banners.extra4.link ? ' href="'~banners.extra4.tracked_link~'" ' }} target="{{ banners.extra4.target }}">
            <img src="{{ banners.extra4.src }}" alt="{{ banners.extra4.alt }}">
        </a>
    </div>
 
</div>
{% endif %}
```

{% endtab %}
{% endtabs %}