> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎯 Announcement Bar — Geavanceerde targetingopties

> ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Het tabblad **Placement** (Plaatsing) is waar je precies bepaalt wie je announcement bar ziet, waar deze verschijnt en wanneer deze live gaat. In plaats van dezelfde boodschap aan elke bezoeker op elke pagina te tonen, kun je nauwkeurige zichtbaarheidsregels maken die aansluiten bij je campagnedoelen.

Of je nu terugkerende VIP's wilt begroeten, een sale alleen wilt promoten aan bezoekers van Instagram, of een feestdagenbanner automatisch wilt laten verschijnen — het targeting-systeem geeft je gedetailleerde controle zonder ook maar één regel code aan te raken 🎯

---

# **⚠️ Voordat je begint**

Om de instellingen voor **Advanced Targeting** (geavanceerde targeting) te configureren:

→ Open een bestaande announcement bar  
→ Of maak eerst een nieuwe aan

Klik vervolgens in de editor op het tabblad **Placement**.

ℹ️ Sommige targetingopties zijn verborgen afhankelijk van het placementtype dat je tijdens het aanmaken hebt gekozen. Zo wordt **Page Targeting** (Paginatargeting) niet getoond bij Cart- of Checkout-plaatsingen, en is **Customer Targeting** (Klanttargeting) niet beschikbaar voor Checkout-plaatsingen. Deze voorwaardelijke secties worden hieronder vermeld, zodat je precies weet wanneer je ze kunt verwachten.

---

# **📐 Weergavepositie**

Deze instelling bepaalt de fysieke locatie van de bar op de pagina.

## **Storefront-posities**

Beschikbaar wanneer de bar is aangemaakt voor **Storefront Page**-plaatsing:

* **Top Push** — Duwt de rest van de paginacontent naar beneden. De bar staat in de normale documentflow.  
* **Top Push (Sticky)** — Blijft vastzitten aan de bovenkant van het viewport terwijl de klant scrollt. De paginacontent wordt nog steeds naar beneden geduwd.  
* **Top Overlap** — Zweeft over de bovenkant van de pagina zonder content naar beneden te duwen.  
* **Top Overlap (Sticky)** — Zweeft aan de bovenkant en blijft zichtbaar tijdens het scrollen.  
* **Bottom Overlap (Sticky)** — Verschijnt aan de onderkant van het viewport en blijft daar tijdens het scrollen.  
* **Manual** — Je bepaalt zelf precies waar de bar verschijnt met behulp van een codefragment of app-blok.

## **Cart-posities**

Beschikbaar wanneer de bar is aangemaakt voor **Cart Page**- of **Cart Drawer**-plaatsing:

* **Top of Cart** — Plaatst de bar bovenaan het winkelmandje.  
* **Bottom of Cart** — Plaatst de bar onderaan het winkelmandje.  
* **Manual** — Plaats 'm zelf met een aangepast codefragment.

## **Checkout-positie**

Beschikbaar wanneer de bar is aangemaakt voor **Checkout Page**-plaatsing *(alleen Shopify Plus)*:

* De bar wordt weergegeven als een aangepast blok binnen de checkout-flow. De positionering wordt beheerd via de instellingen van de checkout UI-extensie.

### **Gedrag bij handmatige plaatsing**

Wanneer **Manual** is geselecteerd:

* De vervolgkeuzelijst **Page Targeting** wordt automatisch uitgeschakeld en geforceerd op **Custom**.

Er wordt een codefragment geleverd dat je in je thema kunt plakken:  
\<div class="futureblink-announcement-block" id="{announcementId}"\>\</div\>

*   
* De bar wordt alleen weergegeven op de plek waar dit blok is geplaatst.

---

# **🎯 Page Targeting**

Page Targeting bepaalt op welke pagina's de bar verschijnt. Deze sectie is **verborgen** voor Cart- en Checkout-plaatsingen, omdat die van nature pagina-specifiek zijn.

## **Beschikbare opties**

* **Every page** — Toont op alle pagina's van je storefront.  
* **Home page only** — Toont alleen op de startpagina.  
* **All product pages** — Toont op elke productdetailpagina.  
* **Products in specific collections** — Toont alleen op productpagina's die tot de geselecteerde collecties behoren.  
  * Wanneer geselecteerd, verschijnt de knop **Select collections** zodat je kunt kiezen welke collecties in aanmerking komen.  
* **Specific products** — Toont alleen op zelfgekozen productpagina's.  
  * Wanneer geselecteerd, verschijnt de knop **Select products** zodat je individuele producten kunt kiezen.  
* **All collection pages** — Toont op elke collectie-overzichtspagina.  
* **Specific collections** — Toont alleen op geselecteerde collectiepagina's.  
  * Wanneer geselecteerd, verschijnt de knop **Select collections**.

### **Hoe het werkt in de storefront**

De bar controleert het huidige paginatype en het URL-pad voordat deze wordt weergegeven:

* Voor **specific products** controleert de bar overeenkomst met de product-ID.  
* Voor **products in specific collections** controleert de bar of het huidige product tot een van de geselecteerde collecties behoort.  
* Voor **specific collections** controleert de bar overeenkomst met de collection handle in de URL.

---

# **⏰ Planning**

Met Planning bepaal je **wanneer** de bar live gaat en wanneer deze automatisch stopt. Als je niets instelt, verschijnt de bar onmiddellijk na publicatie en blijft deze live totdat je 'm handmatig terugtrekt.

## **Starttijd**

* **Right now** — De bar verschijnt onmiddellijk na publicatie.  
* **Specific date** — De bar blijft verborgen tot de gekozen datum en tijd.  
  * Wanneer geselecteerd, verschijnt een **Date Picker** (datumkiezer) met invoervelden voor uur, minuut en AM/PM.

## **Eindtijd**

* **Never** — De bar blijft voor onbepaalde tijd live.  
* **Specific date** — De bar stopt automatisch met weergeven na de gekozen datum en tijd.  
  * Wanneer geselecteerd, verschijnt een **Date Picker** (datumkiezer) met invoervelden voor uur, minuut en AM/PM.

### **Belangrijk gedrag bij planning**

* Als je zowel een start- als eindtijd instelt, moet het eindtijdstip na het starttijdstip liggen.  
* Als je een announcement publiceert waarvan de einddatum al is verstreken, wordt de planning **automatisch gewist** en gaat de bar onmiddellijk live.  
* In de storefront wordt een geplande bar aangemaakt in de DOM, maar verborgen met `display: none` totdat de starttijd is bereikt. Wanneer de eindtijd is verstreken, wordt deze automatisch weer verborgen.

💡 *Planning is perfect voor flash sales, feestdagencampagnes of tijdelijke aankondigingen die je van tevoren wilt instellen.*

---

# **👥 Customer Targeting**

Met Customer Targeting bepaal je wie de bar wel of niet te zien krijgt op basis van wie je winkel bekijkt. Deze sectie is **verborgen** voor Checkout-plaatsingen.

## **Zichtbaarheid op basis van inlogstatus**

* **All customers** — Toon aan iedereen, ongeacht of ze zijn ingelogd.  
* **Logged in customers only** — Verberg de bar voor gasten.

## **Show Bar To**

Bepaalt welk klantsegment de bar moet zien:

* **All Customers** — Geen beperking.  
* **Specific tag** — Alleen klanten met een specifieke tag kunnen de bar zien.  
  * Wanneer geselecteerd, verschijnt een tekstveld: **Enter tags** (kommagescheiden).  
  * Voorbeeld: `VIP, wholesale, returning`  
* **Specific lifetime spent** — Alleen klanten die een bepaald bedrag in totaal hebben besteed over alle bestellingen heen, kunnen de bar zien.  
  * Wanneer geselecteerd, verschijnt een numeriek invoerveld voor het minimale totaalbesteedbedrag.  
  * De bar controleert de `total_spent`-waarde van de klant uit Shopify.

## **Hide Bar From**

Bepaalt welk klantsegment de bar **niet** mag zien. Verbergregels worden geëvalueerd vóór toonregels.

* **No one** — Niet verbergen voor iemand.  
* **Specific tag** — Verbergen voor klanten met een specifieke tag.  
  * Wanneer geselecteerd, verschijnt een tekstveld voor kommagescheiden tags.  
* **Specific lifetime spent** — Verbergen voor klanten die minstens een bepaald bedrag hebben besteed.  
  * Wanneer geselecteerd, verschijnt een numeriek invoerveld voor het minimale totaalbesteedbedrag.

### **Hoe Customer Targeting werkt**

In de storefront controleert de app de gegevens van de huidige klant (geïnjecteerd via Liquid):

1. Als **Logged in only** is geselecteerd en de bezoeker een gast is → de bar is verborgen.  
2. Verbergregels worden eerst gecontroleerd. Als de klant voldoet aan een verbergconditie → de bar is verborgen.  
3. Toonregels worden daarna gecontroleerd. Als de klant voldoet aan een toonconditie → de bar wordt weergegeven.  
4. Als geen enkele voorwaarde overeenkomt, wordt de bar standaard verborgen, uit veiligheid.

⚠️ **Belangrijk:** Klanttargeting vereist dat de klant is ingelogd voor regels op basis van tags en besteedbedrag. Gasten voldoen niet aan tag- of besteedvoorwaarden.

---

# **🌍 Geolocation Targeting**

Met Geolocation Targeting bepaal je uit welke landen of regio's de bar zichtbaar is.

* **All world** — Zichtbaar voor elke bezoeker, ongeacht de locatie.  
* **Specific countries** — Alleen bezoekers uit geselecteerde landen kunnen de bar zien.  
  * Wanneer geselecteerd, wordt de knop **Select countries** actief.  
  * Klikken opent een modal met een doorzoekbare lijst van 246 landen.  
  * Selecteer de landen die je wilt opnemen. Geselecteerde landen verschijnen als samenvattende lijst onder de knop.

### **Hoe geolocatie werkt**

De storefront detecteert het land van de bezoeker via het Shopify-endpoint `/browsing_context_suggestions.json`. Het resultaat wordt opgeslagen in de `sessionStorage` van de browser onder `country_code`, zodat volgende paginaladingen het verzoek niet herhalen.

💡 *Gebruik dit voor regiospecifieke campagnes — bijvoorbeeld een bar met "Gratis verzending naar de VS" die alleen Amerikaanse bezoekers zien.*

---

# **🔗 UTM Source Targeting**

Met UTM Targeting toon je de bar alleen aan bezoekers die via specifieke verkeersbronnen arriveren. Dit is handig als je je boodschap wilt afstemmen op een bepaalde advertentiecampagne of socialmediaplatform.

Deze sectie is **verborgen** voor Checkout-plaatsingen.

## **UTM-filtering inschakelen**

Vink het vakje **"ONLY show to visitors who match UTM Source"** aan om filtering in te schakelen.

⚠️ Wanneer ingeschakeld, zullen bezoekers die direct arriveren (zonder UTM-bron) de bar **niet** zien.

## **Beschikbare platformcheckboxen**

Wanneer ingeschakeld, verschijnen de volgende checkboxen:

* **TikTok**  
* **Facebook**  
* **Instagram**  
* **Google**  
* **Pinterest**  
* **Twitter**

ℹ️ *Facebook en Instagram zijn gekoppeld:* als je er een selecteert, wordt de andere automatisch meegenomen in de controle.

## **Aangepaste UTM-code**

Als je specifieker wilt filteren:

* Vink **Custom UTM\_CODE** aan om een tekstinvoerveld te tonen.  
* Voer kommagescheiden `key=value`-paren in.  
  * Voorbeeld: `utm_medium=sales,utm_campaign=newsletter`  
* De controle is niet hoofdlettergevoelig.

### **Hoe UTM-targeting werkt**

De storefront leest de `utm_source`-parameter van de huidige URL:

* Als alleen platformcheckboxen worden gebruikt, wordt de bar getoond als de `utm_source` van de bezoeker overeenkomt met een geselecteerd platform.  
* Als ook een aangepaste UTM-code is opgegeven, wordt de bar getoond als **ofwel** het platform overeenkomt **ofwel** alle aangepaste sleutel-waardeparen overeenkomen met de URL.

💡 *Maak een "Welkom Instagram-shoppers"-bar die alleen verschijnt wanneer `utm_source=instagram` in de URL staat.*

---

# **⏱️ Time-on-Site Targeting**

Met Time-on-Site Targeting bepaal je hoe lang een bezoeker op de pagina moet zijn voordat de bar verschijnt.

* **Always Show (Default)** — De bar verschijnt onmiddellijk wanneer de pagina laadt.  
* **Show after a while** — Vertraagt het verschijnen van de bar.  
  * Wanneer geselecteerd, verschijnt een numeriek invoerveld **Delay (in seconds)**.  
  * Accepteert waarden van 1 tot 300 seconden (5 minuten).

### **Hoe vertraging werkt**

In de storefront wordt de bar onmiddellijk aangemaakt, maar begint met `display: none`. Na het ingestelde aantal seconden wordt deze zichtbaar.

💡 *Een korte vertraging (5–10 seconden) kan minder storend aanvoelen dan een onmiddellijke popup, vooral voor announcement bars aan de onderkant van de pagina.*

---

# **📱 Device Visibility**

Hoewel apparaatzichtbaarheid wordt geconfigureerd op het tabblad **Design** (Ontwerp), heeft dit een direct effect op targetinggedrag en verdient het daarom vermelding hier voor de volledigheid.

* **Desktop and Mobile** — Zichtbaar op alle apparaten.  
* **Only Desktop** — Verborgen op schermen van 768 px en smaller.  
* **Only Mobile** — Verborgen op schermen breder dan 768 px.

Dit is handig als je verschillende bars (of verschillende boodschappen) wilt tonen aan desktop- versus mobiele shoppers.

---

# **⚠️ Belangrijke opmerkingen**

* **Manual position** schakelt Page Targeting uit, omdat je de plaatsing zelf bepaalt via een codefragment.  
* **Checkout placement** verbergt Customer Targeting en UTM Targeting, omdat Shopify Checkout klanttags of UTM-parameters niet op dezelfde manier blootstelt aan UI-extensies.  
* **Cart placement** verbergt de vervolgkeuzelijst Page Targeting, omdat de bar van nature is beperkt tot het winkelmandje.  
* **Geolocation** gebruikt het gedetecteerde browse-land van de bezoeker. VPN's of proxy-services kunnen voor onverwachte resultaten zorgen.  
* **Klanttags en besteedbedrag** werken alleen voor ingelogde klanten. Gasten worden behandeld als niet-overeenkomend voor tag-/besteedregels.  
* **UTM-filtering** verbergt de bar voor direct verkeer. Zorg ervoor dat dit de bedoeling is voordat je het inschakelt.  
* Meerdere targetingvoorwaarden werken samen met **EN**-logica. De bar moet **alle** actieve targeting-controles doorstaan om te worden weergegeven.

---

# **💡 Voorbeelden en use cases**

## **Voorbeeld 1 — Regiospecifieke gratis verzending**

* **Geolocation:** Specific countries → Verenigde Staten, Canada  
* **Page Targeting:** Every page  
* **Position:** Top Push (Sticky)

Resultaat: Alleen Amerikaanse en Canadese bezoekers zien een blijvende gratis-verzending-bar.

## **Voorbeeld 2 — VIP-klantenbeloning**

* **Customer Show:** Specific tag → `VIP`  
* **Customer Hide:** No one  
* **Page Targeting:** Home page only

Resultaat: Alleen ingelogde klanten met de tag VIP zien de bar op de startpagina.

## **Voorbeeld 3 — Opvolging Instagram-campagne**

* **UTM Source:** Instagram + Facebook  
* **Page Targeting:** All product pages  
* **Position:** Bottom Overlap (Sticky)

Resultaat: Bezoekers die via Instagram- of Facebook-advertenties arriveren, zien een bar die alleen op productpagina's verschijnt met campagnespecifieke boodschappen.

## **Voorbeeld 4 — Geplande flash sale**

* **Scheduling:** Start → vrijdag 9:00 AM, End → vrijdag 11:59 PM  
* **Page Targeting:** Every page  
* **Position:** Top Push

Resultaat: De bar verschijnt automatisch vrijdag om 9:00 uur 's ochtends en verdwijnt om middernacht — handmatig terugtrekken is niet nodig.

## **Voorbeeld 5 — Vertraagde onderste bar**

* **Time-on-Site:** Show after a while → 10 seconds  
* **Position:** Bottom Overlap (Sticky)  
* **Page Targeting:** All product pages

Resultaat: Nadat een bezoeker 10 seconden een productpagina heeft bekeken, verschijnt een subtiele onderste bar met een gerelateerd aanbod.

---

# **🚀 Eindresultaat**

Zodra alles goed is geconfigureerd, helpen de instellingen voor **Advanced Targeting** je om de juiste boodschap op het juiste moment aan de juiste persoon te tonen.

Met de juiste targeting op zijn plaats:

✅ Bars verschijnen alleen op pagina's waar ze relevant zijn  
✅ Klanten zien berichten afgestemd op hun locatie, bron of segment  
✅ Tijdsgebonden campagnes lopen automatisch zonder handmatige tussenkomst  
✅ Gasten en ingelogde shoppers krijgen een gedifferentieerde ervaring  
✅ Advertentieverkeer krijgt een consistente boodschap van klik tot conversie  
✅ Verkopers vermijden het tonen van dezelfde generieke bar aan elke bezoeker

Door deze targetingopties effectief te gebruiken, zorg je ervoor dat elke announcement bar doelgericht, tijdig en relevant aanvoelt voor de mensen die 'm zien 🎯