Add Banner Within Collection Pages after 4 products

How to add banners in between products on a collection page.

1.collection-template.liquid.

2.find product-card-grid.liquid from snippets

current code

<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>

Update code

<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li>
add banner code according to the positions where do you want to display after 4 products or 10 products 

{% if forloop.index == 4 and current_page == 1 and collection.title == "onsale" %}
        <li class="grid__item medium-up--two-quarters" >
          <div class="grid-view-item product-card " style="height: 100%;">
            {{ 'testingbanner.png' | asset_url | img_tag }}
          </div>
        </li>
        <li>
        </li>
{%endif%}

Full Code

<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height %}
          </li> 
{% if forloop.index == 4 and current_page == 2 and collection.title == "onsale" %}
        <li class="grid__item medium-up--two-quarters" >
          <div class="grid-view-item product-card " style="height: 100%;">
            {{ 'testingbanner.png' | asset_url | img_tag }}
          </div>
        </li>
        <li>
        </li>
{%endif%}