Gewusst wie: So fügen Sie eine JavaScript-Datei zu HubSpot hinzu

Zuletzt aktualisiert am: May 18, 2016

Anforderungen

Produkt: HubSpot Marketing
Abonnement: Basic, Pro, & Enterprise
Mit Design Manager (Design-Manager) können Sie nicht nur HTML und CSS schreiben, sondern auch JavaScript-Dateien hosten und bearbeiten. In diesem Tutorial fügen wir eine JavaScript-Datei hinzu und verlinken sie mit unserer Website, Vorlage oder Seite.

Anweisungen

Befolgen Sie diese Anweisungen, um JavaScript im Code-Editor von Design Manager (Design-Manager) zu erstellen.

Zum Design Manager (Design-Manager) navigieren

Um eine JavaScript-Datei zu erstellen, navigieren Sie zum Design Manager (Design-Manager) (Content > Design Manager) (Inhalte > Design-Manager).

Navigate to Design Manager

Neu codierte Datei erstellen

Wählen Sie den Ordner Code Files (Code-Dateien) aus und klicken Sie auf New coded file(Neu codierte Datei).

New coded file

Wählen Sie Code Editor (Code-Editor) und Page (Seite) aus.

Datei mit der Erweiterung .js benennen und speichern

Sie müssen die Datei mit der Dateierweiterung .js benennen. Sie sollten eventuell einen neuen Ordner hinzufügen, um alle JavaScript-Dateien übersichtlich zu organisieren.

Name JS

JavaScript-Datei bearbeiten

Geben oder fügen Sie Ihr JavaScript in den Code-Editor ein. Klicken Sie auf Publish (Veröffentlichen), um Ihr Skript zu aktualisieren und die Änderungen live zu schalten.

Publish JS

Öffentliche URL erstellen

Wenn Sie Ihr JavaScript erstellt haben, muss die URL im Skript-Tag auf das Laden der Datei verweisen.  Um die URL zu erstellen, klicken Sie auf Actions > Get public URL (Aktionen > Öffentliche URL erstellen).

Get public URL

Die URL liegt in Form eines HubL (HubSpot Markup Language)-Tokens vor, das den URL-Pfad für die JavaScript-Datei darstellt. Jedes Mal, wenn Sie Ihr Skript aktualisieren, ändert sich die URL. Wenn Sie das Hubl-Token mit Ihrem Skript verlinken, wird stets die neueste Version geladen  

Klicken Sie auf Kopieren, um die URL zu kopieren.

Public URL tag

Skript einschließen

Nachdem der Hubl-Tag die URL für Ihr Script generiert hat, können Sie es dem src-Attribut des Skript-Tags hinzufügen.  Ein Beispiel sehen Sie im Bildschirmfoto unten.

Skripts können zwar der gesamten Website oder einzelnen Seiten hinzugefügt werden, doch es wird empfohlen, Skripts dem < head > oder einem HTML-Modul in der globalen Fußzeile Ihrer Vorlage hinzuzufügen. Somit wird sichergestellt, dass Sie nur die erforderlichen Skripts auf Seiten mit einer bestimmten Vorlage laden. Um den Kopfzeilen-Tag eines Vorlagenlayouts aufzurufen, klicken Sie auf Edit > Edit Head(Bearbeiten > Kopfzeile bearbeiten).

HubSpot Help article screenshot

Alternativ können Sie das Skript einem HTML-Modul in der globalen Fußzeile Ihrer Vorlage hinzufügen. 

HubSpot Help article screenshot

Verwenden von jQuery-Plugins und externen Skripts im COS

Nachfolgend finden Sie zusätzliche Informationen zur Verwendung von jQuery-Plugins und externen Scripts im COS.

jQuery ist in jeder COS-Seite enthalten.

Jedes Layout oder jede codierte HubSpot-Vorlage zeigt automatisch  jQuery 1.71 or 1.11 x (jQuery 1.71 oder 1.11 ) im Kopfzeilen-Tag der Seite. Weitere Hinweise zur Auswahl der zu ladenden jQuery-Version finden Sie hier

Select jQuery version

Vorheriger Artikel:

Weiter zum nächsten Artikel: