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.

Om een Instagram feed te plaatsen, is het noodzakelijk dat je Google Tag Manager (GTM) hebt gekoppeld (dit is beschikbaar vanaf een Mijnwebwinkel PRO abonnement). Mocht je dat nog niet gedaan hebben, lees dan via onderstaande links hoe je een Google Tag Manager account aanmaakt en hoe je deze kunt koppelen in de beheeromgeving van je webshop. Doe dit voordat je met SnapWidget verdergaat.

A. Google Tag Manager (GTM).

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

<< video-link>>

Tag aanmaken

  • Zorg dat je bent ingelogd in Google Tag Manager en selecteer de container die je gekoppeld hebt met je winkel. Selecteer links in het menu het item Tags.

  • Klik vervolgens op New om een nieuwe tag aan te maken.

  • Geef je tag een naam en klik vervolgens op het blok Tag Configuration.

  • Kies vervolgens Custom HTML onder Custom.

  • Plak vervolgens 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>
  • Pak nu de snapwidget-lightbox.css lijn en de snapwidget-lightbox.js lijn uit je SnapWidget snippet (zie hieronder rood gemarkeerd) en plak dat in na de 2de regel tussen de snapwidget.js lijn en de <script> lijn. 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!

Met de gratis SnapWidget kun je geen Photo Link opzetten.

Wat de Photo Link doet:

Als je 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.

  • Pak nu de iframe code uit je SnapWidget snippet (zien beneden in groen gemerkt). Plak de iframe code 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.). Als u van deze optie gebruik wilt 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 wel tussen vierkante haakjes zijn.

  • Wanneer je alle code hebt geplakt, klik je rechtsboven in je scherm op Save.

  • Er komt nu een pop-up met de melding dat je nog geen trigger hebt geselecteerd. Klik op Add Trigger.

  • Selecteer vervolgens de optie All Pages.

  • Klik nogmaals op Save rechtsboven in je scherm om je tag op te slaan. Als je tag is opgeslagen klik je rechtsboven in je scherm op Submit en vervolgens op Publish. Geef je tag eventueel een naam en beschrijving (als je dat wilt) en klik op Continue. Je ziet nu het volgende scherm:

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

B. Mijnwebwinkel

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

Instagram feed plaatsen in je webshop

<< video-link>>

  • Ga naar de beheeromgeving van je webwinkel. Ga daar naar de pagina waar je de Instagram feed wilt plaatsen. In de tekst van deze pagina plak je de volgende code (de tag): [instagram-feed] (of de naam die je hebt gegeven zoals voorheen aangesproken, bijvoorbeeld [grid-display]).

Let op!

Zorg dat de tag niet dikgedrukt is en gebruik een enter om de tekst in te voegen (geen 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!

Did this answer your question?