Autor: andré

Wie funktioniert das Tracken/-ing einer Email (HTML, PHP, MySQL/MariaDB)

für die meisten Unternehmen ist es interessant ob der User die Email(Newsletter usw.) gelesen(geöffnet) hat oder nicht.
Die verbreiteste Variante ist das mitsenden einer Grafik(Logo zum Beispiel), hier wird der Name(unique ID automatisch generiert ) oder die benötigte unique ID als Variable mit angehangen. Wichtig hierbei ist das die Grafik vom Server geladen wird und nicht als Anhang in der Email.

Im Quelltext der Email sieht das so aus:

https://www.meineDomain.de/image/1245e7r987.jpg

oder angehangen an einer Grafik als $_GET[‚variable‘]:

https://www.meineDomain.de/image/meinLogo.jpg?uniqueID=1245e7r987

Für das Tracken benötigt man eindeuige ID, die in jeder automatisch versendeten Email generiert wird. Diese ID wird/muss abgespeichert werden um eine Zuordnung/Auswertung zu gewährleisten. In den meisten Fällen wird diese ID in einer Datenbank-Tabelle abgespeichert, eine Excel-Tabelle oder eine Textdatei reichen aber zum speichern auch aus.

Was passiert nach dem versenden der Email:
Wenn der User die Email öffnet wird die Grafik vom Server geladen, beim laden vom Server wird ein Script ausgeführt welche die ID abspeichert.

Ab diesem Punkt hat man alle Informationen um ein Script für die Ausgabe der Auswertung fertig zustellen.

Wie kann man das Tracken einer Email als User verhindern?

Ganz einfach: In den man die Email nur als simple Textdatei(Plain Text) öffnet. In diesem Fall werden keine externe Dateien geladen und eine Auswertung
ist nicht möglich. Die meisten Freemail-Anbieter unterstützen die Anzeige aber möglicherweise nicht bzw. in jedem Email-Programm(wie z.Bsp.: Thunderbird oder Microsoft Outlook) findet man diese Einstellung unter Ansicht.

Benötigte Dateien/Funktionen zum Email tracken:

Email-Template / Email-Nachricht

<php>
$uniqueID=rand();
</php>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine News</title>
</head>
<body>

<!-- Grafik mit uniqueID -->
<center><img src="https://www.meineDomain.de/image/meinLogo.jpg?uniqueID=<?=$uniqueID?>" alt="" border="0"></center>
<!-- /Ende Grafik mit uniqueID -->

<br><br><br>
Sehr geehrte Damen und Herren
...
...
...
</body>
</html>

Funktion die ausgeführt wird wenn die Email versandt wurde:

<php>
# absenden der Email, im Beispiel mit mail();
mail($userEmail,$subject,$mailText,$emailHeader);

#Insert Werte(Email-Adresse vom Empfänger und #uniqueID) in die Datenbanktabelle

$em=new emailTracking;
$em->sendEmailAnduniqueID($userEmail,$uniqueID)
</php>

PHP-Datei die die Grafik „meinLogo.jpg“ erstellt damit eine PHP-Funktion beim aufruf ausgeführt wird (die Grafik ansich kann ja keine Funktion/Befehle ausführen):

<php>
ini_set('display_errors', 1);
ob_start();

# Eintrag in die DB, wenn die Email aufgerufen wird vom User
$em=new emailTracking;
if(isset($_GET['uniqueID']) && is_numeric($_GET['uniqueID'])){
$em->insertUniqueID();    
}

# Grafik wird erstellt
$loadIMG='meinLogo.jpg';
if(isset($_GET['uniqueID'])){
$string=strip_tags($_GET['uniqueID']);
$loadIMG='meinLogo.jpg?uniqueID='.$string;
}

# Ausgabe der Grafik
@header('Content-Type: image/jpeg');
$showIMG =$em->showEmailImage($loadIMG);
imagejpeg($showIMG);
imagedestroy($showIMG);
ob_end_flush();
</php>

Die Klasse „emailTracking“:

<php>
#class emailTracking
#author konstanten.net


class emailTracking{

function showEmailImage($loadIMG)
{
$img = @imagecreatefromjpeg($loadIMG);
return $img;
}

function insertUniqueID()
{
$uid=$this->checkGetValue(($_GET['uniqueID']));

if(isset($uid) && is_numeric($uid))
{
$query="SELECT * FROM `email_send` WHERE uid='".$uid."';
$res=SQL($query);
$countRes=mysqli_num_rows($res);
if($countRes==1)
{
$arr=mysqli_fetch_assoc($res);
$query="SELECT * FROM `email_tracking` WHERE uid='".$uid."' AND `userEmail`='".$arr['userEmail']."';$resTB2=SQL($query);
$countRes=mysqli_num_rows($resTB2);
if($countRes==0)
{
$insertSQL="INSERT INTO `email_tracking` (`uid`,`userEmail`,`time`) VALUES ('".$uid."','".$arr['userEmail']."','".time()."')"; 
SQL($insertSQL);
$deleteSQL="DELETE FROM `email_send` WHERE uid='".$uid."'";
SQL($deleteSQL);
}
}
}
}

function sendEmailAnduniqueID($userEmail,$uniqueID)
{
$query="SELECT * FROM `email_send` WHERE uid='".$uniqueID."' AND `userEmail`='".$userEmail."'";
$res=SQL($query);
$countRes=mysqli_num_rows($res);
if($countRes==0)
{
$insertSQL="INSERT INTO `email_send`(`uid`, `userEmail`,`time`) VALUES ('".$uid."','". $userEmail."','".time()."')"; 
SQL($insertSQL);
}
}

function checkGetValue($val)
{
if(isset($val) && is_numeric($val)){
$val=$val;
}else{
$val=0;
}
return $val;
}

}

Und zum Schluss noch die .htaccess für das „umschreiben“ der Grafik-Datei mit dem Modul mod_rewrite:

RewriteEngine on

RewriteRule ^meinLogo.jpg$ meinLogo.php?%{QUERY_STRING} [L]

Der einfachste Weg ein WP-Widget in die Mobile Navigation einzubinden.

Die Widgets von WordPress kann man beliebig auf der Seite positionieren, außer in der Navigation. In der Desktop Version benötigt man diese auch nicht in der Navigation, aber in der Mobilen Version werden diese ausgeblendet.

In meinem Fall wollte ich gern die Widgets: „Letzte Posts“, „Letzte Kommentare“, „Kategorien“ und „Archiv“ in der Mobilen Navigation haben:

  1. Erstelle eine neue Seite mit dem Namen des Widgets, z. Bsp. „Archiv“
  2. [Seite bearbeiten] Füge das Widget „Archiv“ in die neu erstellte Seite „Archiv“ ein und speichere die Seite ab
  3. [Menü bearbeiten] Füge die neu erstellte Seite zum Hauptmenü dazu

Bis hier her sollte alles kein Problem bzw. müssen wir jetzt den neu erstellten Menüpunkt „Archiv“ in der Hauptnavigation in der Desktop Version noch ausblenden, das kann man einfach mit CSS und der Anweisung „display:none“ machen.

Wir benötigen für das ausblenden noch die ID vom Menüpunkt „Archiv“. Die einfachste Möglichkeit diese ID herauszufinden ist im FireFox mit dem Add-on bzw. der Erweiterung „Web developer“. Wenn man „Web developer“ im FireFox installiert hat befindet sich im Context-Menü der rechten Maustaste der Punkt [Inspect], wenn man den Menüpunkt „Archiv“ im Hauptmenü markiert und [Inspect] betätigt wird der ausgewählte Bereich im HTML-Code angezeigt. Im HTML-Code unter id=“meineID“ findet man die automatisch von WordPress erstellte ID.

In WordPress findet man die ID vom Menü, wenn man über dem Menüpunkt fährt(Design -> Menüs -> Hauptmenü -> Menüpunkt) sieht in der Statusleiste im FireFox Browser die Url, am Ende der Url befindet sich das Kürzel/$_GET[‚variable‘] : edit-menue-item=215 (nach dem Gleichheitszeichen befindet sich immer der Wert der übergeben wird).
Jetzt muss man nur noch das „edit-“ entfernen und den Wert hinzufügen und schon hat die ID auf die man dann mit CSS zugreifen kann, also: #menue-item-215

Um das CSS einzufügen, benutzt man am besten den „Customizer“, unter dem Punkt „Zusätzliches CSS“ kann man einfach den nachfolgenden CSS-Code einfügen(Bitte die eigene ID verwenden bzw. im CSS eintragen):

.navigation #menu-item-215
{
	display:none;
}

Deutschlandticket, Deutsche Bahn und die Verifizierung von Verimi oder anders: Was ist Phishing?

Ich wollte auch einmal den Vorzug des Deutschlandtickets der Deutschen Bahn kommen, deshalb wie so oft nimmt man den schnellsten Weg und bestellt online über die Webseite der Deutschen Bahn.

Konto erstellt, Bestellformular ausgefüllt und abgeschickt, nach „erfolgreichen“ absenden kam die Meldung das man die Bestellung noch verifizieren muss, ok alles keine Problem.

Eine Möglichkeiten der Verifizierung ist die Abfrage der Bankverbindung, durch die Eingabe der Zugangsdaten der eigenen Bankverbindung auf der Verimi Webseite -> Wenn diese Variante Kriminelle anwenden redet man von „Phishing“. Ich habe mich für eine andere Variante der Verifizerung entschieden, aber leider hat nach erfolgreicher Verifizierung und die Nötigung deren App zu installieren, das Bestellen/die Weiterleitung zu der Webseite der Deutschen Bahn nicht funktioniert.

Persönlich finde ich es nicht schlimm das die Bestellung des Deutschlandtickets online nicht funktioniert hat, aber mit welchem Recht nutzt ein Unternehmen das Unwissen der Leute aus und vordert auf deren Webseite die Eingabe der Login-Daten der Bankverbindung für eine Verifizierung, sowas darf nicht sein und sollte unterbunden werden.

Und noch ein Link zum Thema:
https://www.suedkurier.de/ueberregional/wirtschaft/verimi-tink-was-hinter-der-kontodaten-abfrage-der-bahn-steckt;art416,12050226

Webseiten/Domain check mit web.archive.org alias Wayback Machine

Um die History einer Domain oder Webseite zu überprüfen gibt es die Wayback Machine. Auf dieser Seite (Internet Archive – Wikipedia) kann man alles mögliche suchen, auch die History bzw. die unterschiedlich gestalteten Webseiten einer Domain. Über eine Timeline kann man einfach zu dem gewünschten Jahr springen wo die Version der Webseite gespeichert wurde… Viel Spaß beim stöbern:

Wayback Machine: „konstanten.net“

Valides HTML: Woran erkennt man, ob eine Webseite gut umgesetzt ist?

Unabhängig vom Design und der Seitenstruktur der Webseite, spielen auch andere Faktoren eine große Rolle für eine gute Webseite. Hier eine kleine Auflistung, woran man erkennt, ob eine Webseite gut umgesetzt ist oder nicht:

Valides HTML

Viele CMS wie WordPress bieten zum Teil kostenlos Templates bzw. Designs für Webseiten an, die von Agenturen erstellt worden sind. Diese sehen schön aus, aber viele dieser Seiten sind nicht W3C konform (d.h. fehlerfreier HTML-Code). [Wikipedia Artikel zum World Wide Web Consortium, Abk.: W3C]

Warum sollte eine Webseite W3C konform sein, ganz einfach: Suchmaschinen oder Programme wie ein Screenreader [Wikipedia Artikel] können eine Seite besser lesen und nebenbei hat die Webseite noch eine schnellere Ladezeit.

Mit validem HTML ist die Darstellung in den meisten modernen Browser auch dieselbe, ohne dass man für jeden Browser eine eigene CSS-Anweisung schreiben muss.

Überprüfen kann man mit dem W3C Validator ob die Webseite fehlerfrei ist oder nicht: https://validator.w3.org/

Weitere Merkmale einer guten Webseite:

  • Übersichtliche Seitenstruktur
  • Schnelle Ladezeit
  • Grafiken optimiert/komprimiert fürs Web, d.h.: die kleinste Dateigröße ohne möglichen Qualitätsverlust… große Dateigrößen haben den Nachteil längerer Ladezeiten
  • Verwendung einer gut lesbaren Schriftart bzw. Schriftgröße. Am besten sind serifenlose Fonts für die Bildschirmdarstellung/Screens geeignet.

„Hello world“… Hallo Blog.

Ich formuliere einfach mal den standard Beitrag von WordPress, der bei der Installation mit angelegt wird, zu meinem ersten Blog-Eintrag um.

Warum macht veröffentlicht man eigentlich einen Blog: Ziel des ganzen ist auf der einen Seite eine größere Erreichbarkeit zur erzielen und „Futter“ für die Suchmaschienen(z.Bsp.: Google, Bing, DuckDuckGo* usw.) zu generieren und auf der anderen Seite mein Wissen oder Gedanken was sich in meiner Online-Zeit angesammelt hat zu teilen.

*In einer meiner nächsten Beiträge gehe ich auf Privacy von Google und Co. und meiner Lieblingssuchmaschiene DuckDuckGo [Wikipedia Artikel] ein, wo _keine_ Suchanfragen getracked/ausgewertet werden bzw. Privatsphäre im Vordergrund stehen.