Liquid, JavaScript, Themes
Hallo,
vor einigen Tagen kam eine Mail, das zusätzliche Skripte veraltet sind und man jetzt auf Web-Pixel umsteigen soll. Da ich im Checkout per "zusätzliche Skripte" den Optin für Google Rezensionen eingebaut habe wollte ich nun einen Custom Pixel nutzen, den man über "Kundenereignisse" einbinden kann. Dieser Pixel läuft in einer Sandbox bzw. iframe. Shopify schreibt in der Doku, das dadurch keine Modals mehr möglich sind. So ein Modal Window benötigt es aber fürs Optin der Goggle Rezensionen, damit der User zustimmen kann. Jetzt wird das Script zwar ausgeführt, aber es erscheint eben für den Nutzer nix mehr auf der Webseite. Hat das schon jemand lösen können?
Hey @axelf
Haben dir unsere Anleitung hier nicht helfen können? Und auch hier? Hier weitere Tipps dazu die ich für dich gegoogelt habe:
Um die Google Rezensionen Opt-in Funktion mit dem neuen Web-Pixel-System in Shopify zu implementieren, müssen wir die Möglichkeiten des Google Tag Managers (GTM) und der Shopify Pixel-API nutzen. Hier ist eine Schritt-für-Schritt-Anleitung, wie du dies erreichen kannst:
Google Tag Manager Konto erstellen:
GTM-Container in Shopify einfügen:
Online Store
> Themes
> Actions
> Edit Code
.<head>
-Abschnitt der theme.liquid
Datei ein.Erstelle ein benutzerdefiniertes Pixel:
Settings
> Customer events
> Create custom pixel
in deinem Shopify Admin.Google Tag Manager
als Plattform oder das Skript manuell in ein benutzerdefiniertes Pixel einfügen.Pixel-Skript einfügen:
<script>
-Tags aus dem GTM-Skript und füge den verbleibenden Code in das Pixel-Skriptfeld ein.dataLayer
-Objekt zu senden:
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
(function(w,d,s,l,i){
w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:'';
j.async=true; j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
value: event.data?.checkout?.totalPrice?.amount
});
});
HTML Tag
und füge das Skript für Google Reviews Opt-in ein:
<script>
window.onload = function() {
window.gapi.load('surveyoptin', function() {
window.gapi.surveyoptin.render({
"merchant_id": 'YOUR_MERCHANT_ID',
"order_id": 'ORDER_ID',
"email": 'CUSTOMER_EMAIL',
"delivery_country": 'DELIVERY_COUNTRY',
"estimated_delivery_date": 'ESTIMATED_DELIVERY_DATE'
});
});
}
</script>
YOUR_MERCHANT_ID
, ORDER_ID
, etc.) mit den entsprechenden Variablen aus dem dataLayer
.Trigger für den Tag erstellen:
checkout_completed
Ereignis auslöst.Durch die Nutzung des Google Tag Managers und der neuen Shopify Pixel-API solltest du sicherstellen können, dass deine Google Reviews Opt-in Funktion weiterhin korrekt funktioniert, auch nach der Umstellung auf das neue Web-Pixel-System. Achte darauf, alle Schritte sorgfältig zu befolgen und teste gründlich, um sicherzustellen, dass alles wie gewünscht funktioniert.
Wenn du weiterhin Probleme hast oder Unterstützung benötigst, könnte es hilfreich sein, einen Shopify-Experten oder Entwickler zu konsultieren, um sicherzustellen, dass alles korrekt eingerichtet ist. Gerne kann ich welche empfehlen.
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Ich bin die Anleitungen durchgegangen und es ist halt nicht so einfach da durchzusteigen und alles direkt zu verstehen. Gegooglet habe ich ebenfalls genug, aber das man den GTM benötigt geht ja nirgends so richtig hervor. Wo steht denn diese Info:
"Durch die Nutzung des Google Tag Managers und der neuen Shopify Pixel-API solltest du sicherstellen können, dass deine Google Reviews Opt-in Funktion weiterhin korrekt funktioniert, auch nach der Umstellung auf das neue Web-Pixel-System."
Meine Einbindung klappt ja und wird auch ausgeführt, nur das Modal erscheint nicht.
Wird denn mit dem GTM auch das Modal-Window wirklich angezeigt?
https://support.google.com/merchants/answer/9352538?hl=de hier steht folgendes:
Google Tag Manager kann derzeit nicht für die Integration des Opt-in-Codes verwendet werden.
Tut mir leid zu hören und, wie gesagt, an dieser Stelle kann ein Experte das mit euch anschauen, um zu schauen was alles möglich ist.
Hoffe das hilft dir weiter! 😉
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Ich benötige ja keinen Experten, sondern nur eben die Antwort, ob ich für die Rezensionen wirklich den GTM benötige und wenn ja ob das Fenster für den Opt In dann sichtbar ist.
@axelf: mein aktueller Stand dazu ist: Die Additional Checkout Scripts sind hier nach wie vor das Mittel der Wahl, da die Customer Events / App Blocks keine Popups zulassen.
Danke @_buerohuegel !
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024