Liquid, JavaScript, Themes
Hallo liebe Shopify-Community,
ich habe ein Problem und weiß nicht genau wie ich es definieren soll und auch nicht an wen ich mich genau wenden muss.
Mein Online-Shop (www.howling-nature.com) existiert nun bereits seit etwa 1 Jahr in seiner jetzigen Form. Anfang diesen Jahres habe ich mich das erste mal mit Google-ads beschäftigt und mich an normalen Kampagnen versucht, alles ohne Probleme.
Nun wollte ich eine Google-Shopping Kampagne starten, und habe dies auch erfolgreich durchgeführt.
Dafür hatte ich bereits meinen Online-Shop mit dem Google-Merchant Center verbunden (mehrere Montage vor dem Schalten der Google-Shopping Kampagne). Soweit lief alles gut.
Etwa 2-3 Wochen nach dem Aktivieren der Google-Shopping Kampagne wurde ich vom Google-Support angeschrieben das meine Shopping-Kampagne ausgesetzt würde, da meine Produkte nicht sichtbar sind.
Ich habe also direkt mit einem Supportmitglied von Google gesprochen und dieses meinte, man könne keine Bilder meiner Produkte auf meiner Homepage sehen, weder bei den Produktübersichten, noch bei den Produktseiten selber bzw. seien die Bilder nur stark verpixelt sichtbar.
Ich habe dies überprüft mit unterschiedlichen Browsern, unterschiedlichen Geräten, von unterschiedlichen Standorten aus, aber ich hatte absolut keine Probleme und habe dem Support auch "beweis screenshots" geschickt.
Mir wurde dann gesagt, es würde nochmal eine Überprüfung stattfinden. 3 Tage später wurde mein Google-Ads Konto komplett gesperrt mit der Aussage "Ich würde Falschinformationen präsentieren".
Nun weiß ich nicht was ich tun soll. Meine Vermutung ist, dass eventuell durch bestimmte Scripte im Theme-Code vielleicht bei einigen Browsern oder Geräten die Bilder der Produkte nicht korrekt geladen werden, aber das ist nur eine sehr grobe Vermutung, da ich dieses Problem noch nie hatte und noch von niemandem, der meinen Shop besucht hat, dies gehört habe.
Ich benutze ein recht etabliertes Shop-Theme (Avone OS 2.0 Vers. 4.3). Zusätzlich habe ich die Avada SEO suite App installiert, die ja auch in den Shopcode eingreift, falls diese Information hilfreich ist.
Google hat gesagt ich solle mich an den Shopify Support wenden, naja nun bin ich hier.
Da ich nicht genau weiß wie ich dieses Problem definieren soll, wollte ich fragen ob mir hier jemand helfen kann, oder mich an die richtige Stelle verweisen könnte, oder ob jemand dieses Problem sogar schonmal gelöst hat?
Vielen Dank!
Hey @Ascadian
Danke für die Angaben und das ist super ärgerlich, das kann ich voll verstehen, denn die Ads sind ja teilweise das Brot & Butter eines Shops! Das Thema haben wir schon ausgiebig hier in der Community besprochen. Hast du hilfreiche Threads gefunden ueber die obige Suchleiste? Im Englischen Forum ist auch der Emanuel Flossie der beste Experte in diesem bereich und seine Threads findest du hier. Hier ein paar generelle Tipps dazu was du machen kannst um dieses Problem in Google zu beheben:
Technische Überprüfung: Zunächst würde ich empfehlen, sicherzustellen, dass es kein technisches Problem im Shop gibt.
Google Cache überprüfen: Gehe zu Google und gebe site:www.howling-nature.com ein. Klicke auf den kleinen grünen Pfeil neben der URL eines der Produkte und wähle 'Im Cache'. Überprüfe, wie Google den Shop im Cache speichert und ob Bilder hier korrekt geladen werden.
Theme & Apps: Manchmal können bestimmte Themes oder Apps in Konflikt geraten.
Kontakt mit Google:
Letztlich ist es wichtig, systematisch vorzugehen und das Problem von verschiedenen Seiten zu betrachten. Mit den oben genannten Schritten solltest du hoffentlich eine Lösung oder zumindest eine klarere Vorstellung vom Problem finden.
---
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
Hallo Gabe!
Vielen Dank für deine schnelle Rückmeldung!
Ich habe mir mal GTmetrix angeschaut, hier ist laut den Daten alles super und ich habe ein "A" Rating bekommen.
Bei Pagespeed Insights scheint es wohl Skripte zu geben, welche die Ladezeit stark verlängern, zumindest auf Mobilgeräten.
Zusätzlich habe ich mir mal die Konsole angeschaut, also bei Chrome auf "untersuchen" geklickt.
Bei einer meiner Produktübersichtsseiten bekomme ich diese CORS Nachrichten:
Access to XMLHttpRequest at 'https://apps.omegatheme.com/cookies-notification/client/save-cookies.php' from origin 'https://howling-nature.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
bettwasche:186
POST https://apps.omegatheme.com/cookies-notification/client/save-cookies.php net::ERR_FAILED 404 (Not Found)
(anonymous) @ bettwasche:186
bettwasche:1 Access to link prefetch resource at 'https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e0463a398b1075386f51084d8aa756bafb17.woff2?va...' from origin 'https://howling-nature.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
bettwasche:60
GET https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e0463a398b1075386f51084d8aa756bafb17.woff2?va... net::ERR_FAILED 403 (Forbidden)
GDPR_LC_ZLoad.Element.appendChild @ bettwasche:60
prefetch @ preloads.js?locale=de:38
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
load (async)
prefetch @ preloads.js?locale=de:37
next @ preloads.js?locale=de:57
prefetchAssets @ preloads.js?locale=de:58
onLoaded @ preloads.js?locale=de:63
load (async)
(anonymous) @ preloads.js?locale=de:69
(anonymous) @ preloads.js?locale=de:71
bettwasche:1 Access to link prefetch resource at 'https://fonts.shopifycdn.com/open_sans/opensans_n6.63a74f6cbbfef729fb07955b2d5b4cc83273862e.woff2?va...' from origin 'https://howling-nature.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
bettwasche:60
GET https://fonts.shopifycdn.com/open_sans/opensans_n6.63a74f6cbbfef729fb07955b2d5b4cc83273862e.woff2?va... net::ERR_FAILED 403 (Forbidden)
Allerdings kann ich damit ehrlich gesagt nichts anfangen, da ich keine Ahnung von sowas habe.
Wohin kann ich mich am besten wenden damit mir dabei geholfen wird oder kann jemand anhand dieser Daten das Problem identifizieren?
Vielen Dank!
Hey @Ascadian
Danke für die Angaben und hier wäre es wichtig zu abwägen wie viel Zeit und Energie du in diese Google Shopping Kampagne stecken möchtest denn wenn Google hier Probleme macht dann liegt das im Grossen und Ganzen ausserhalb unserer Kontrolle. Oft ist es auch so dass solche Fehler mit der Zeit in der GSC einfach wieder verschwinden.
Das Problem, dass du in der Konsole sehen kannst, bezieht sich also auf CORS. Haben dir dazu unsere Threads hier weiteres dazu aufdecken können? Es handelt sich hier meistens um eine Sicherheitsmaßnahme in Webbrowsern, die sicherstellt, dass Skripte von einer Webseite nicht einfach Ressourcen von einer anderen Webseite abrufen können, es sei denn, die zweite Webseite erlaubt dies explizit. Die Fehler bedeuten, dass bestimmte Ressourcen (in diesem Fall anscheinend Schriftarten und Cookies) nicht korrekt geladen werden können.
Es gibt mehrere Möglichkeiten, warum das passieren kann:
Im grossen und ganzen ist es also ein 3P (Drittanbieter) Problem und man muss eine Berechtigung einrichten, sonst funktioniert es nicht. Es ist also ausserhalb Shopify und auf unserer Seite können wir da nicht viel ändern.
Ein ähnlicher Fehler kann auftreten, wenn die Access-Control-Allow-Headers zwar vorhanden sind, aber in der Preflight-Antwort nicht erlaubt sind. Wie der Name schon sagt, handelt es sich um eine Ressource, die freigegeben wird und deren Ursprung sich überschneidet (Crossing Origins). Mit anderen Worten: es wird etwas von einem anderen Ort angefordert, der nicht zu Shopify gehört. Eine CORS-Richtlinie ist eine Reihe von Regeln, die festlegen, wie diese Ressourcen miteinander geteilt werden können.
Der Browser bekommt die Response und prüft ob der Access-Control-Allow-Origin
Wert mit der in der ursprünglichen Anfrage angegebenen Domain übereinstimmt. Wenn sie übereinstimmen, ist die Anfrage erfolgreich. Wenn sie nicht übereinstimmen, oder wenn der Access-Control-Allow-Origin
Header in der Antwort nicht vorhanden ist, schlägt die Anfrage fehl. Kurz gesagt: Gemäß der CORS-Richtlinie muss die externe Ressource die Erlaubnis haben, die Ressource wieder mit dem Shop zu teilen, sonst schlägt die Anfrage fehl.
Ein Beispiel: Ich habe die Domain "example.com" bei Shopify gehostet und die Domain "3p-example.com" gehosted von AWS. Ich habe etwas Javascript auf meiner Storefront, das eine Ressource von 3p-example.com anfordert. Damit 3p-example.com die Erlaubnis hat, diese Ressource freizugeben, muss der Header in der Antwort die Anfrage Access-Control-Allow-Origin: example.com
enthalten. Auf diese Weise weiß die Domain auf Shopify (example.com), dass sie die Erlaubnis hat, diese Ressource anzufordern. Falls nötig (und nur falls nötig) kann der Header Access-Control-Allow-Origin: *
zurückgeben stattdessen, aber das ist deutlich weniger sicher.
Um es so zusammenzufassen, dass es verständlicher ist - um dieses Problem zu lösen, müsste die Art und Weise, wie die Header-Informationen gehandhabt werden, in deinem Shop angepasst werden, um entweder die erforderlichen Access-Control-Allow-Origin erlaubt, oder alle Access-Control-Allow-Origin Parameter.
Lösung?
Du wirst wahrscheinlich den Support der App, von der die Ressource abgeruft wird, um Hilfe bitten müssen. Der Dienst ist möglicherweise nicht in der Lage, diese Änderung an seinen Antwort-Headern (response headers) was notwendig wäre, um die CORS-Richtlinie zu erfüllen.
Wir hier auf Shopify Seite können für dich jegliche Richtlinien nicht einfach von unserer Seite aus ändern, wie du hoffentlich verstehen kannst, auch wenn du das gerne hättest.
Dafür gibt es keine "technische" Einschränkung oder Erklärung, sondern es ist eine reine Frage der Sicherheit. Ohne diese Richtlinie wäre es böswilligen Akteuren möglich, ungestraft beliebige Ressourcen von überall her zu beziehen. Die Richtlinie ist also da um Shops und Plattforms wie Shopify und andere Plattforms zu schützen.
Ich verstehe es würde bequemer sein, wenn es keine Sicherheitsrichtlinien gäbe, aber das würde auch ein riesen Loch für böswillige Leute öffnen, die dein Shop schaden wollen.
Es gibt derzeit nur sehr wenige Fälle, in denen jemand Shopify auf diese Weise nutzen möchte, da man in der Regel davon ausgeht, dass Händler Shopify nicht ausschließlich als Ressourcenhost für andere Dienste nutzen.
Daher ist es derzeit kaum möglich, die Antwort-Header zu ändern, um sie an die CORS-Richtlinien eines Drittanbieters anzupassen. Dazu müssten wir unsere Bilder und unsere CDN-Konfigurationen sowie wahrscheinlich auch das Shopify Core System erheblich verändern.
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
Hallo @Gabe !
vielen Dank für deine super ausführliche Antwort zu diesem schwierigen Thema.
Ich gebe mal ein Update was bisher passiert ist.
Im Prinzip bin ich erstmal den einfachsten Weg für mich gegangen und habe einige Optionen in der Avada-App ausgeschaltet, aber das hatte wohl keinen Effekt.
Im nächsten Schritt habe ich die gesamte Avada-App deinstalliert. Dabei muss man etwas aufpassen, da diese App schon Veränderungen am Code vornimmt. Aber es gibt direkt in der App Optionen, den Code automatisch entfernen zu lassen und der Support kann einem auch helfen. Danach habe ich die App komplett deinstalliert und nochmal meinem Shop überprüft.
Soweit scheinen die "Speedtest" Daten noch immer ganz gut zu sein und es funktioniert alles.
Interesanterweise habe ich beim "untersuchen" im Browser nicht mehr so viele rote Warnings gehabt, zumindest sah es für mich so aus. Also habe ich nochmal eine Merchant-Center Überprüfung angefragt.
Dieses mal mit positivem Ergebnis!
Das heißt, mein Merchant-Center ist nicht mehr blockiert und ich hoffe nun das ich auch die Google-Ads Sperre wieder aufheben kann.
Ich kann nicht genau sagen woran das Problem nun lag, aber ich denke es hat auf jedenfall etwas mit dieser Avada-App zu tun.
Vielleicht hilft dies anderen mit ähnlichem Problemen.
Liebe Grüße!
Super freut mich sehr! 😉
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