Webshop: technisch
Einbinden deiner Subdomain per DNS CNAME-Record
Der Shop läuft auf dem FrachtPilot-Server und wird in deine Webseite mit eigener Subdomain eingerichtet, damit die angezeigte URL weiterhin zu deiner Homepage passt.
Die Verknüpfung erfolgt mit zwei DNS-Einträgen, sodass deine Subdomain auf unseren Server verweist. Hierfür richtest du einen CNAME-Record für die Weiterleitung deiner Subdomain auf deinen FrachtPilot-Shop ein.
Schreib bitte eine E-Mail an support@frachtpilot.de mit der gewünschten Subdomain, damit wir die Beantragung Konfiguration starten können.
Bitte beachte, dass nach Beantragung des Zertifikats der CNAME für das Zertifikat innerhalb von 3 Tagen / 72 Stunden in deinem DNS konfiguriert sein muss. Ansonsten muss der Prozess erneut gestartete werden.
Wenn wir alles vorbereitet haben, erhältst du eine E-Mail mit weiteren Informationen zur Konfiguration von uns.
Für die Weiterleitung musst du einen DNS CNAME-Record einrichten, der auf die FrachtPilot-URL my2.frachtpilot.de verweist. Diese Einstellung leitet alle Anfragen auf die Subdomain an deinen Shop weiter.
shop.meine-url.de CNAME my2.frachtpilot.de
Die notwendigen Hinweise Einrichtung des CNAME Eintrags für das Zertifikat erhältst du per Mail. Warte am besten auf die E-Mail, bevor du etwas konfigurierst.
Nach der Einrichtung des CNAME-Records kann es bis zu 24 Stunden dauern, bis die Weiterleitung funktioniert. Normalerweise dauert das aber nicht so lange.
Gib uns bitte Bescheid, sobald du alles eingerichtet hast. Erst das Zertifikat bestätigt worden ist, können wir die Server final konfigurieren, damit dein Shop erreichbar ist.
Einstellungen in FrachtPilot
Die Internet-Adresse des Shops kannst du anschließend in den Einstellungen unter dem Reiter "Webshop" einrichten. Gib hier auch die Adresse der Homepage, der Kontaktseite und des Impressums an. So können Nutzer diese Adressen später vom Webshop aus erreichen.
Anschließend solltest du noch folgende Schritte durchführen, welche in weiteren Artikeln beschrieben sind:
- Ein E-Mail-Konto hinterlegen, um zum Beispiel Bestellbestätigungen versenden zu können
- Produktbilder und -beschreibungen hinzufügen
- AGB hinterlegen
- Eigene Produktkategorien für den Webshop erstellen (optional)
- Kundengruppen mit abweichenden Preisen einrichten (optional)
Eigenes JavaScript einbinden
Du kannst im Webshop auch eigenes JavaScript einbinden, um zusätzliche Funktionen zu implementieren. Unter *
Einstellungen > Webshop > Eigene Inhalte in das <head>
-Tag einfügen*, kannst du dein JavaScript einfügen.
Wenn du JavaScript hier hinterlegst, dann wird es auf jeder Seite des Shops ausgeführt.
Tracking von Shop-Kunden und Conversion
Das Beispiel berücksichtigt nicht, ob die KundIn Cookies zugestimmt hat. Dies ist nur ein Beispiel für eine mögliche Umsetzung. Das Beispiel funktioniert auch nicht alleinstehend, sondern muss korrekt in Verbindung mit einem Cookie-Banner und passenden Datenschutzerklärung implementiert werden.
Google Tag Manager einrichten
Informationen zur Einrichtung des Google Tag Managers findest du auf der Google-Seite.
Die Einrichtung des Google Tags wird hier bei Google erläutert.
Wenn du deine Tracking-ID hast, dann musst du diese in den Code eintragen und TAG_ID
ersetzen:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
Dies fügst du dann anschließend, wie unter Eigenes JavaScript einbinden beschrieben, in die Einstellungen deines Webshops ein.
Meta Pixel / Facebook Pixel einrichten
Informationen zur Einrichtung des Meta Pixels / Facebook Pixels findest du auf der Facebook-Seite.
Wenn du deine Pixel-ID hast, dann musst du diese in den Code eintragen und {your-pixel-id-goes-here}
zwei Mal
ersetzen:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '{your - pixel - id - goes - here}');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Dies fügst du dann anschließend, wie unter Eigenes JavaScript einbinden beschrieben, in die WebShop-Einstellungen ein.
Conversion Tracking für Google Ads und Meta Pixel / Facebook
Das Beispiel berücksichtigt nicht, ob die KundIn Cookies zugestimmt hat. Dies ist nur ein Beispiel für eine mögliche Umsetzung. Das Beispiel funktioniert auch nicht alleinstehend, sondern muss korrekt in Verbindung mit einem Cookie-Banner und passenden Datenschutzerklärung implementiert werden.
Das Beispiel hier setzt voraus, dass du Google Tag Manager und Facebook Pixel bereits eingebunden hast.
function getCurrentUserInfo() {
let elem = document.querySelector('#current-user-info');
if (elem) {
return elem;
} else {
return 'User info not found';
}
}
// Bool-Variablen, um das Tracking zu aktivieren/deaktivieren
// Bool-Variable, um Google-Tracking zu aktivieren/deaktivieren
var enableGoogleTracking = true;// true = aktiviert, false = deaktiviert
var google_conversion_id = 'AW-CONVERSION_ID/CONVERSION_LABEL'; // Hier deine Google Conversion ID eintragen
// Bool-Variable, um Meta-Tracking zu aktivieren/deaktivieren
var enableMetaTracking = true;// true = aktiviert, false = deaktiviert
function trackConversionRecurring() {
var price = document.querySelector('.s-shopping-cart').dataset.totalGross;
var currency = document.querySelector('.s-shopping-cart').dataset.currency;
// var customer_number = getCurrentUserInfo().dataset.customerNumber;
let button = document.querySelector('.shopping-cart-checkout .btn.btn-primary');
if (button != null) {
if ((button.textContent.trim() === 'Dauerhaft bestellen')
|| (button.textContent.trim() === 'Place recurring')) {
button.addEventListener("click", function () {
// Google-Tracking auslösen, wenn aktiviert
if (enableGoogleTracking) {
gtag('event', 'purchase', {
send_to: google_conversion_id, // Hier deine Google Conversion ID und Label eintragen
value: parseFloat(price),
currency: currency,
});
}
// Meta-Tracking auslösen, wenn aktiviert
if (enableMetaTracking) {
fbq('track', 'Purchase', {
value: parseFloat(price),
currency: currency
});
}
});
}
}
}
function trackConversionSingle() {
var price = document.querySelector('.s-shopping-cart').dataset.totalGross;
var currency = document.querySelector('.s-shopping-cart').dataset.currency;
// var customer_number = getCurrentUserInfo().dataset.customerNumber;
let button = document.querySelector('.shopping-cart-checkout .btn.btn-primary');
if (button != null) {
if ((button.textContent.trim() === 'Zahlungspflichtig bestellen')
|| (button.textContent.trim() === 'Place order')) {
button.addEventListener("click", function () {
// Google-Tracking auslösen, wenn aktiviert
if (enableGoogleTracking) {
gtag('event', 'purchase', {
send_to: google_conversion_id, // Hier Ihre Google Conversion ID und Label eintragen
value: parseFloat(price),
currency: currency,
});
}
// Meta-Tracking auslösen, wenn aktiviert
if (enableMetaTracking) {
fbq('track', 'Purchase', {
value: parseFloat(price),
currency: currency
});
}
});
}
}
}
// Verankerung des Trackings für Einzelbestellungen
if (window.location.href.endsWith("/checkout-single")) {
trackConversionSingle();
}
// Verankerung des Trackings für Dauerbestellungen
if (window.location.href.endsWith("/checkout-recurring")) {
trackConversionRecurring();
}
Eigenes Conversion Tracking umsetzen
Auslesen des eingeloggten Kunden
So erhältst du die Informationen zu dem aktuell eingeloggten Kunden:
let customer = document.querySelector('#current-user-info')
So sieht die Rückgabe aus:
data-customer-number="12957"
data-customer-type="TYPE_PRIVATE_CUSTOMER"
data-customer-type-name="Privatperson / Kleinunternehmer"
data-customer-group-name="Privatkunden"
data-customer-name="Sup TEST"
data-customer-contact-email="mail@mail.de"
data-user-email="mail@mail.de"
So kannst du auf die Kundennummer zugreifen:
const CUSTOMER_NUMBER = getCurrentUserInfo().dataset.customerNumber;
Auslesen Warenkorbwert
Auf den aktuellen Warenkorbwert netto/brutto und die verwendete Währung kannst du so zugreifen:
const order_total_net = document.querySelector('.s-shopping-cart').dataset.totalNet
const order_total_gross = document.querySelector('.s-shopping-cart').dataset.totalGross
const order_currency = document.querySelector('.s-shopping-cart').dataset.currency