Hoe voeg ik een Instagram feed toe aan mijn Mijnwebwinkel webshop?

Let op - Je kunt ook gebruik maken van Shoppable-items in je Instagram-feed.

Wat bedoelen we met Shoppable?

Shoppable-items in je widget stellen je klant in staat om direct naar de pagina te gaan waar ze het item kunnen kopen dat is gemarkeerd als Shoppable. Dit maakt het voor je klant zoveel gemakkelijker en zou je omzet moeten verhogen als het op de juiste manier wordt toegepast.

Volg deze instructies om Shoppable-items te maken.

Om een Instagram feed te plaatsen, is het noodzakelijk dat je Google Tag Manager (GTM) hebt aangesloten (dit is alleen mogelijk bij een Mijnwebwinkel PRO abonnement). Als je dat nog niet hebt gedaan, lees dan onderstaande instructies voor het aanmaken van een Google Tag Manager-account. Doe dit voordat u doorgaat met SnapWidget.

Informatie over Google Tag Manager en het aanmaken van een account

A. Hoe integreer ik Google Tag Manager?

Met Google Tag Manager plaatst u HTML-tags op uw website, bijvoorbeeld om een live chat te integreren. Google heeft al een aantal veelgebruikte tags voor je klaar staan, zodat je ze in een mum van tijd in je shop kunt plaatsen.

Om uw SnapWidget-widget op uw winkelpagina('s) weer te geven, moet u aangepaste tags maken. Hieronder wordt uitgelegd hoe u GTM aan uw winkel kunt koppelen. We zullen je dan laten zien hoe je de tags kunt maken die je nodig hebt (het vereist enige technische kennis van jouw kant, maar als je volgt wat we je laten zien, zou het niet al te moeilijk moeten zijn).

Let op - Tags die u toepast, hebben invloed op de manier waarop uw webwinkel werkt. Het is daarom belangrijk dat je regelmatig de werking van je winkel en bestelproces controleert. Houd er bovendien rekening mee dat ons ondersteuningsteam geen ondersteuning biedt bij het maken van tags.

Nu is het tijd om aan de slag te gaan met Google Tag Manager.

1. Maak een Google Tag Manager-account aan

Ga naar Google Tag Manager en log in met je Google-account. Begin met het aanmaken van een account en een container. Deze container is wat u later naar uw winkel linkt en bevat al uw tags. Vul de volgende gegevens in:

Vul onder Accountnaam uw Account naam in. Gebruik de naam van uw bedrijf of winkel (dit is verplicht).
Selecteer indien nodig uw land.
U kunt ervoor kiezen om uw gegevens anoniem met Google en anderen te delen (zie info hierover in pop-up).
Voer onder Containerconfiguratie de winkeldomeinnaam in bij containernaam.
Selecteer als Doelplatform de optie Web en klik op Creëren.

De Servicevoorwaardenovereenkomst voor Google Tag Manager wordt nu weergegeven.

Als u akkoord gaat met de daarin vermelde voorwaarden, vinkt u het selectievakje onderaan de pagina Serviceovereenkomst aan.

Klik dan op Ja bovenaan de pagina

Er verschijnt nu een stukje code op het scherm.

U hoeft dit niet in uw webwinkel te plaatsen, laat dat maar aan ons over! Dat gaat volledig automatisch als je deze instructie hebt voltooid ;-)

2. Uw container koppelen

Selecteer in je Mijnwebwinkel Dashboard in de linker menubalk Marketing en klik op Google-services.

Open op de pagina Google-services het tabblad Google Tag Manager. Klik op de knop Maak verbinding met Google om verbinding te maken met uw Google-account.

Google geeft een dialoogvenster Sign in with Google weer. Selecteer het account dat u wilt gebruiken om te koppelen aan Google Tag Manager.

Opmerking: je hebt dit waarschijnlijk al eerder gedaan om verbinding te maken met Analytics of de Search Console.

Schakel vervolgens de optie Gebruik Google Tag Manager in en selecteer uw container. Is uw container al geselecteerd? Dan hoef je alleen nog maar op Opslaan te klikken.

3. Tags toevoegen

Dat was niet erg, toch? Tijd om je container te vullen! Naast de kant-en-klare tags die Google daar al heeft, kun je ook je eigen HTML-tags maken. Deze optie wordt bijvoorbeeld gebruikt voor het toevoegen van een livechat op elke pagina van uw winkel. Of voor het tonen van Google Maps op je contactpagina. Voor SnapWidget wordt het gebruikt om uw widget op uw Mijnwebwinkel winkelpagina('s) weer te geven.

Zorg ervoor dat u bent aangemeld bij Google Tag Manager en selecteer de container die u aan uw winkel heeft gekoppeld.

Selecteer het item Tags in de linker menubalk.

Klik vervolgens op Nieuw om een nieuwe tag aan te maken.

Geef uw tag een naam en klik dan op het Tagconfiguratie blok.

Kies bij Kies tagtype de optie Aangepaste HTML onder Aangepast.

Plak vervolgens het onderstaand stukje code in het HTML-veld.

<!-- SnapWidget -->
<script src="https://snapwidget.com/js/snapwidget.js"></script>
<script>
 var iframe = '';
 var elements = document.getElementsByTagName("p");
 [].forEach.call(elements, function (element) {
   if (element.textContent === "[instagram-feed]") {
     var iframeDiv = document.createElement("div");
     iframeDiv.innerHTML = iframe;
     element.parentNode.replaceChild(iframeDiv, element);
   }
 });
</script>

Kopieer de regel snapwidget-lightbox.css en regel snapwidget-lightbox.js uit uw SnapWidget-fragment (zie hieronder rood gemarkeerd) en plak deze na de 2e regel tussen de regel snapwidget.js en de regel <script>.

Deze lijne moeten worden gebruikt als je een SnapWidget PRO-abonnement hebt en je de Photo Link hebt ingesteld als Lightbox. Het is ook van toepassing wanneer u gebruik maakt van de Shoppable item-functie van uw SnapWidget-widget, want om dit in te schakelen moet u de Photo Link instellen als Shoppable (Lightbox).

Let op - U kunt geen Photo Link instellen met de gratis SnapWidget.

Wat de Photo Link doet:

Als u op een foto in een SlideShow of een Grid klikt, wordt de foto in een groter formaat weergegeven. Met de gratis SnapWidget wordt de foto weergegeven op de SnapWidget-website, maar met het PRO-abonnement wordt deze weergegeven in een Lightbox met een link naar de originele foto op Instagram.

Kopieer vervolgens de iframe-code uit je SnapWidget-fragment (zie hieronder groen gemarkeerd) en plak deze tussen de 2 apostrofs (' ') van de var iframe = ' ' op de 4e regel.

Als je de HTML-inhoud van de Google Tag Manager-tag correct hebt toegevoegd / gewijzigd, ziet deze er als volgt uit (de XXXXXX in de iframe src is je eigen SnapWidget-ID voor de specifieke widget).

Let op - Met SnapWidget kunt u verschillende widgets maken (bijv. Grid, SlideShow, enz.). Om van deze optie gebruik te maken, moet u de GTM-tags dienovereenkomstig een naam geven (bijv. Grid Display en SlideShow Display in plaats van Instagram-feed). Je vervangt dan het [instagram feed] gedeelte van de if (element.textContent === "[instagram feed]") regel door de juiste naam. Dit moet tussen vierkante haken staan.

Als je alle code hebt geplakt, klik je rechtsboven in je scherm op Opslaan.

Er verschijnt een pop-up waarin staat dat je nog geen trigger hebt geselecteerd. Klik op Trigger toevoegen.

Selecteer vervolgens de optie Alle pagina's onder Kies een trigger.

Dit toont dan Alle pagina's / Paginaweergave onder Afvuurtriggers.

Klik nogmaals op Opslaan rechtsboven in je scherm om je tag op te slaan. Zodra uw tag is opgeslagen, klikt u op Verzenden in de rechterbovenhoek van uw scherm en vervolgens op Indienen. Geef je tag een naam en beschrijving (als je wilt) en klik op Publiceren. U krijgt nu het volgende scherm te zien:

Na het laden is je tag gepubliceerd en kun je de Instagram feed in je webshop plaatsen!

B. Plaats de Instagram feed in je webshop

Eindelijk is het tijd om je Instagram feed in je webshop te plaatsen.

Ga naar je webshop Dashboard en kies onder Inhoud -> Pagina's de pagina waar je je Instagram Feed aan toe wilt voegen.

In de tekst van deze pagina plak je de volgende code (de tag): [instagram feed] (of de naam die je eerder hebt opgegeven, bijvoorbeeld [grid-display]).

Let op - Zorg ervoor dat de tag niet dikgedrukt is en gebruik enter om de tekst in te voegen (niet shift enter want dan werkt het niet).

Klik vervolgens linksonder op Opslaan.

Google Tag Manager zal nu dit stukje code automatisch vervangen met de Instagram feed van SnapWidget!

En op je webshop zal het er als volgt uitzien als je een Grid-widget hebt gebruikt.

Of zoals dit als je een Slideshow-widget hebt gebruikt.

Als je de Photo Link als Lightbox in jouw SnapWidget-widget heeft ingesteld, kunt je op een van de foto's klikken en deze wordt dan als volgt weergegeven.

Let op - Wanneer je de lay-out van de Instagram Feed wijzigt nadat je die in je webshop hebt ingesteld, kan het zijn dat de wijzigingen niet doorgevoerd worden. Dit komt doordat de Instagram feed in je cache onthouden wordt. Om de Instagram Feed op de juiste manier te zien, moet je even je cache legen of je webshop bekijken in de incognito stand van je browser.

C. Instagram widget opnieuw koppelen

Het kan voorkomen dat je na verloop van tijd het instagram widget opnieuw moet koppelen (re-auth) aan je Instagram account. Dat komt doordat de autorisatie is verlopen:

Om dit op te lossen log je in in je Snapwidget account, waarna je klikt op het vak onder "username" (zie afbeelding hieronder). Daarna volg je de stappen om opnieuw te koppelen. Klik daarna op UPDATE & GET WIDGET en klaar is kees!