In der heutigen wettbewerbsintensiven E-Commerce-Landschaft sind Daten nicht nur ein Luxus, sondern eine Notwendigkeit. Käufer werden zunehmend von Social Proof beeinflusst, und die Anzeige von Echtzeitkennzahlen wie Produktaufrufen oder kürzlich getätigten Bestellungen kann das Vertrauen und die Konversionsrate erheblich steigern. In diesem Beitrag werden wir untersuchen, wie Sie Ihre Shopify-Produktseiten verbessern können, indem Sie ein benutzerdefiniertes Element integrieren, das wichtige Produktstatistiken verfolgt und anzeigt. Wir werden bestehende Apps überprüfen, die diese Funktionalität bieten, und uns mit einem maßgeschneiderten Ansatz für diejenigen befassen, die eine Lösung entwickeln möchten, ohne sich auf Integrationen von Drittanbietern verlassen zu müssen.
Die Anzeige dynamischer Produktstatistiken — wie „In den letzten 24 Stunden 200 Mal angesehen“ oder „50 Bestellungen, die am letzten Tag aufgegeben wurden“ — kann ein Gefühl von Dringlichkeit und Glaubwürdigkeit vermitteln. Diese Kennzahlen bestätigen nicht nur die Beliebtheit eines Produkts, sondern nutzen auch die Psychologie des Social Proof und ermutigen potenzielle Kunden zum Handeln. Wenn Besucher sehen, dass viele andere sich mit einem Produkt beschäftigen oder es kaufen, steigt ihr Selbstvertrauen, einen Kauf zu tätigen.
Wenn du nach einer schnellen und problemlosen Lösung suchst, bieten mehrere Shopify-Apps bereits integrierte Funktionen zur Anzeige von Kennzahlen zum Produktengagement:
Diese Apps sind so konzipiert, dass sie sich nahtlos in Ihren Shopify-Shop integrieren lassen und bieten eine Plug-and-Play-Lösung, die keine umfangreichen Entwicklungsarbeiten erfordert. Sie sparen zwar Zeit und Mühe, bieten aber möglicherweise nicht immer das Maß an Anpassung oder Markenkonsistenz, das eine maßgeschneiderte Lösung bieten kann.
Für Agenturen oder Entwickler, die die volle Kontrolle über das Design und die Funktionalität ihres Shopify-Shops haben möchten, ist die Erstellung eines benutzerdefinierten Tracking-Elements eine attraktive Option. Im Folgenden finden Sie einige Codebeispiele, um zu veranschaulichen, wie Sie eine solche Lösung implementieren können.
In Ihrer Produktseitenvorlage können Sie ein JavaScript-Snippet einfügen, das bei jedem Laden der Seite eine Anfrage an einen benutzerdefinierten Backend-Endpunkt sendet. Zum Beispiel:
html:
<script>
document.addEventListener("DOMContentLoaded", function() {
// Assuming your product id is available in the Liquid template
var productId = "{{ product.id }}";
// Send a POST request to your backend endpoint to track the view
fetch('/apps/track-product-view?product_id=' + productId, {
method: 'POST'
})
.then(response => {
// Optionally handle the response
console.log("View tracked");
})
.catch(error => console.error("Error tracking view:", error));
});
</script>
Dieses Snippet nutzt das Liquid-Templating von Shopify, um die Produkt-ID zu übergeben, und verwendet die Fetch-API, um dein Backend zu benachrichtigen. Sie könnten den Endpunkt mithilfe eines App-Proxys oder einer serverlosen Funktion implementieren, die auf Plattformen wie AWS Lambda gehostet wird.
Sobald dein Backend die Anzahl der Aufrufe aktualisiert hat (z. B. in einem Metafeld gespeichert), kannst du sie mit Liquid auf der Produktseite anzeigen:
flüssig:
{% if product.metafields.analytics and product.metafields.analytics.view_count %}
<p>Viewed {{ product.metafields.analytics.view_count }} times in the last 24 hours</p>
{% endif %}
Dieser Code prüft, ob das Metafeld existiert und gibt die Anzahl der Aufrufe entsprechend aus.
Um Bestellungen für jedes Produkt zu verfolgen, kannst du in Shopify einen Webhook einrichten, der ausgelöst wird, wenn eine Bestellung erstellt wird. Wenn Sie beispielsweise Node.js mit Express verwenden, könnten Sie Folgendes haben:
Javascript:
// Example: Express server to handle order webhooks
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/webhooks/order-created', (req, res) => {
const order = req.body;
// Loop through each line item in the order
order.line_items.forEach(item => {
const productId = item.product_id;
// Update your custom order count for the product
// For instance, increment the count in your database or update a Shopify metafield via the API
console.log(`Order received for product ID: ${productId}`);
});
// Respond to acknowledge receipt of the webhook
res.sendStatus(200);
});
app.listen(3000, () => console.log('Webhook listener running on port 3000'));
Dieses einfache Express-Setup überwacht Ereignisse bei der Auftragserstellung, extrahiert die relevanten Produkt-IDs, und dann können Sie Ihre Logik implementieren, um die Anzahl der Bestellungen in Ihrem ausgewählten Datenspeicher zu aktualisieren.
Integrieren Sie Ihr benutzerdefiniertes Element mithilfe von JSON-Schemas in den Theme-Editor von Shopify, um maximale Flexibilität zu erzielen. Auf diese Weise können Ladenbesitzer anpassen, wie Statistiken angezeigt werden, ohne den Code zu berühren. In Ihre Abschnittsdatei könnten Sie Folgendes aufnehmen:
json:
{
"name": "Product Analytics",
"settings": [
{
"type": "text",
"id": "analytics_heading",
"label": "Analytics Heading",
"default": "Product Engagement"
},
{
"type": "range",
"id": "view_threshold",
"label": "Minimum Views to Display",
"min": 0,
"max": 500,
"step": 10,
"default": 50
}
],
"presets": [
{
"name": "Product Analytics Block"
}
]
}
Dieses Schema ermöglicht einen anpassbaren Block, in dem Benutzer die Überschrift ändern und einen Schwellenwert für die Anzeige der Analysedaten festlegen können.
Weitere Informationen zur Integration dynamischer Objekte in den Theme-Editor von Shopify mithilfe von JSON-Schemas findest du in unserem Blogbeitrag“Erstellen eines benutzerdefinierten Abschnitts in Shopify mit dem JSON-Schema.“
Durch die Entwicklung einer maßgeschneiderten Lösung haben Sie die volle Kontrolle über die Ästhetik und Funktionalität, was besonders für Marken von Vorteil ist, die eine einzigartige Präsentation oder spezifische Leistungsoptimierungen benötigen.
Egal, ob Sie eine Drittanbieter-App wie Fomo, Sales Pop oder Notification X für eine schnelle Einrichtung wählen oder sich für die Einführung Ihrer eigenen maßgeschneiderten Lösung entscheiden, die Integration von Produktanalysen in Ihren Shopify-Shop kann einen großen Unterschied machen. Es verbessert nicht nur den Social Proof, sondern bietet auch wertvolle Einblicke in das Kundenverhalten. Indem Sie das Potenzial von Echtzeitdaten nutzen, können Sie ein ansprechenderes Einkaufserlebnis schaffen, das sowohl das Vertrauen als auch die Konversionsrate steigert.
Für alle, die Anpassungen im Theme-Editor von Shopify weiter erkunden möchten, sollten Sie unbedingt unseren Leitfaden zur Verwendung von JSON-Schemas zur Erstellung dynamischer Objekte lesen — eine wichtige Ressource, um Ihre Shopify-Anpassung auf die nächste Stufe zu heben.
Viel Spaß beim Programmieren, und hier geht es darum, die Leistung Ihres Shops mit datengesteuertem Design zu steigern!
UNHYDE ist eine in München ansässige Webentwicklungsagentur, die es sich zur Aufgabe gemacht hat, Grenzen in den Bereichen Webentwicklung, Benutzererlebnis und digitales Marketing zu überschreiten. Unsere Mission ist es, leistungsstarke digitale Plattformen zu schaffen, die eine bedeutende Kundenbindung und ein messbares Geschäftswachstum fördern. Wir sind international tätig und eine anerkannte Shopify-Partneragentur, die bereits unzählige Websites und Webshops weltweit erfolgreich lanciert hat.
Für weitere Einblicke oder wenn Sie bereit sind, Ihre Website auf das nächste Level zu heben, wenden Sie sich bitte an wenden Sie sich an uns bei UNHYDE®, der Webdesign-Agentur. Wir sind immer hier, um zusammenzuarbeiten und maßgeschneiderte Lösungen zu entwickeln, die Ihren individuellen Bedürfnissen entsprechen.
kostenloses erstgespräch
NEHMEN SIE KONTAKT AUF