Share-Buttons-mit-dem-Tagmanager-implementieren

Alles rund um die Webanalyse und Suchmaschienen Marketing

Share-Buttons-mit-dem-Tagmanager-implementieren

Einfache Teilen- Buttons mit dem Tagmanager implementieren

Wenn Sie den Inhalt der Angeboten wird auch zum teilen anbieten möchten, gibt es verschiedene Möglichkeiten. Sie können es entweder mit dem jeweiligen Codegenerator des Anbieters machen oder selber diese Knöpfe (Buttons) erstellen. Vorteil beim verwenden eigener Buttons ist es, dass keine persönlichen Daten an den jeweiligen Dienst gesandt wird und das kein extra Script vom Anbieter heruntergeladen werden muss. Dadurch bewahrt man sich eine gute Performance und die DSGVO wird auch eingehalten.

Teilen Button Code anpassen

Für die Buttons brauchen wir 2 Tag Typen. Einmal einen für den Style (css) für die Gestaltung und einmal den Typ Script um die Buttons zu erzeugen. Der CSS Teil sieht wie folgt aus:


<style type="text/css">
.share-buttons img {
width: 35px;
padding: 5px;
border: none;
box-shadow: 0;
display: inline;
}
.post .post-tags a {
display: inline-block;
border: none;
padding: 0px;
margin: 0 10px 0 0;
}
</style>

Mit dem ersten Teil (share-buttons img) wird das Bild ein wenig verkleinert damit es nicht in voller größe Angezeigt wird. Sie können dort die Anzahl bei width erhöhen um es auch größer darzustellen.

Der zweite Teil (post post-tags a) ist für den Link da. Damit der Link keinen Rahmen etc. hat.

Kommen wir nun zum Script welches die Buttons erzeugt.


<script>
(function() {
// Liest die aktuelle Seiten URL aus
var loca = window.location.href
// Kreiert ein Div Element für die Buttons
var divT = document.createElement("div");
divT.className = 'share-buttons';
// Position der Buttons mit css Selector
document.querySelector('.post-tags').appendChild(divT);
// Links für die Teilen Buttons
var aNames = [
"https://www.facebook.com/sharer.php?u="+loca,
"https://plus.google.com/share?url="+loca
];
// Links für die Teilen Bilder
var imgNames = [
"https://www.analytics-sem-tutorials.de/facebook.png",
"https://www.analytics-sem-tutorials.de/google.png"
];
// Erstellt die Teilen Links
for (var i = 0; i < aNames.length; i++) {
var a = document.createElement('a');
a.href = aNames[i];
a.target = "_blank";
a.className = 'share-link';
a.id = "sl"+[i]
document.querySelector('.share-buttons').appendChild(a);
}
//Erstellt die Teilen Buttons (Bilder)
for (var i = 0; i < imgNames.length; i++) {
var img = document.createElement('img');
img.src = imgNames[i];
document.querySelector('#sl'+[i]).appendChild(img);
}

})();
</script>

In diesem Beispiel wurde einmal ein Button für Facebook und Google + hinzugefügt. Wichtig ist im Code, dass Die Reihenfolge von “aNames” und “imgNames” die gleiche ist. Bedeutet wenn der erste Link für Facebook in “aNames” ist muss auch Facebook der erste Link in “imgNames” sein.

CSS Selector zum Button einfügen

Die Position der Buttons wird mit Hilfe eines css Selectors bestimmt. Der blaue Bereich im Code. gehen wir kurz genauer auf diesen ein. Die Codezeile ist folgende: document.querySelector('.post-tags').appendChild(divT);

Es wird hier ein Element mit der Klasse (class) “post-tags” ausgewählt. Wenn Sie Ihre Seite aufrufen und aussuchen möchten, wo die Buttons erscheinen sollen, machen Sie an der Stelle ein Rechtsklick und wählen untersuchen aus.

Die Ansicht sieht ähnlich wie folgende aus:

Wenn Sie mit der Maus über die Elemente fahren, sehen Sie auf Ihrer Webseite, welches Element es genau ist. Bei mir z.B bietet sich die class=”post-tags” an. Diese ist nämlich nur auf den Artikel Seiten. Im Selektor sieht die Klasse wie folgt aus;

document.querySelector('.post-tags').appendChild(divT);

Der Punkt signalisiert, dass es eine Klasse ist. Besser ist es immer eine ID zu selektieren. Hätten wir z.B einen Tag mit der ID “post-Tags” würde der Selektor wie folgt aussehen.

document.querySelector('#post-tags').appendChild(divT);

Wie an diesem Beispiel ersichtlich werden soll, ist id = # und class = . (class ist ein Punkt).

Images (Bilder) für die Buttons laden

Um die richtigen Bilder zu laden, benötigen Sie diese als erstes. Sie können sich diese mit folgenden Link herunterladen.

Hier können Sie die Buttons herunterladen

Nach dem Sie Buttons heruntergeladen haben. Speichern Sie diese beiden Bilder auf Ihrem Hoster Server. Ersetzen Sie anschließend die Links bei imgNames im Code mit Ihren. Beachten Sie die Reihenfolge. Erst Facebook dann google plus.

Nach dem der Selektor gewählt wurde und im Code angepasst wurde, müssen wir nun nur noch alles mit dem Tagmanager implementieren.

Share Button Code mit dem Tag Manager implementieren

Tag erstellen

  1. Öffnen Sie Ihren Tagmanager
  2. Klicken Sie im linken Menü auf Tags
  3. Klicken Sie auf Neu
  4. Klicken Sie auf Tag- Konfiguration
  5. Wählen Sie Benutzerdefiniertes HTML aus
  6. Kopieren Sie den gesamten Code hinein. Erst Style dann Script.
  7. Klicken Sie auf Speichern
  8. Klicken Sie auf Tag Speichern
  9. Geben Sie einen Namen ein z.B. Social Share
  10. Klicken Sie erneut auf Speichern

Trigger erstellen

Beim Trigger gibt es Grundsätzlich 2 Möglichkeiten. Dom ist bereit oder Fenster geladen. Wählen Sie Dom ist Bereit wenn die Buttons im sichtbaren Bereich sind beim laden der Seite. Sind die Buttons allerdings am Ende der Seite genügt auch Fenster geladen aus. Wenn Sie so immer verfahren, dass wenn Sie elemente im Nachhinein einfügen im nicht sichtbaren bereich wenn alles bereits geladen ist. kann es zu einer besseren Performance der Seite kommen.

  1. Klicken Sie im linken Menü auf Trigger
  2. Klicken Sie auf neu
  3. Klicken Sie auf Trigger- Konfiguration
  4. Klicken Sie oben rechts auf das blaue Plus
  5. Wählen Sie “dom ist bereit” oder “Fenster geladen” aus
  6. Wählen Sie nun “Einige Ereignisse aus”
  7. Wählen Sie die drei Felder wie folgt aus
  8. Page URL –> enthält –> Ihre einmalige Kategorie in der Url für Artikel z.B –> Blog
  9. Klicken Sie auf Speichern
  10. Geben Sie für den Trigger einen Namen ein und klicken erneut auf Speichern

Gehen Sie nun zurück zu den Tags und wählen Sie ihren gerade erstellten aus. Klicken Sie auf Trigger hinzufügen und fügen den Trigger hinzu. Klicken Sie auf Speichern. Nun ist der Trigger mit Ihren Tag verknüpft.

Ihr Trigger und Tag sollten nun wie folgt aussehen:

Sie können nun in der Vorschau überprüfen ob der Teilen Buttons an der richtigen Stelle eingefügt werden.

Klicken Sie anschließend oben rechts auf Senden –> Veröffentlichen und Weiter.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.