Inhalte mithilfe eines Einbettungscodes eingbetten

Mit dem Content-Einbettung-Feature können Sie Inhaltsabschnitte in HubSpot erstellen und diese dann in Ihre Website einbetten. Um eine Content-Einbettung zu einer externen Website-Seite hinzuzufügen, können Sie entweder das Plug-in zum Einbetten von Inhalten für den Gutenberg-Editor von WordPress verwenden oder den Einbettungscode direkt nach HubSpot kopieren.

Im Folgenden erfahren Sie mehr darüber, wie Sie den Content-Einbettungscode kopieren, sowie Best Practices für die Aufrechterhaltung des Cumulative Layout Shift (CLS)-Scores Ihrer Seite.

Bitte beachten: Eingebettete Inhalte werden nicht über einen iframe geladen, sondern über JavaScript eingefügt. Suchmaschinen können JavaScript ausführen und erkennen den eingebetteten Inhalt, wodurch SEO-Probleme, die iframes mit sich bringen können, vermieden werden.

Den Einbettungscode kopieren

So kopieren Sie den Einbettungscode für einen Content-Einbettungsabschnitt:

• Klicken Sie in Ihrem HubSpot-Account auf Content und dann auf Einbettungen.
• Bewegen Sie den Mauszeiger über eine Einbettung, klicken Sie auf Mehr und wählen Sie dann Einbettungscode abrufen aus.
  
  
• Klicken Sie im Dialogfeld auf Kopieren, um den Einbettungscode zu kopieren.

Sie können dann den Einbettungscode nach Bedarf in Ihren externen Inhalt einfügen. Beim Einfügen des Einbettungscodes ist Folgendes zu beachten:

• Eine Content-Einbettung erhält ihre Formatierung von der Seite, auf der sie eingebettet ist, und nicht von HubSpot. Um das Erscheinungsbild der Content-Einbettung anzupassen, müssen Sie das CSS der Seite aktualisieren. Wenn Sie WordPress verwenden, erfahren Sie in diesem Artikel, wie Sie benutzerdefiniertes CSS hinzufügen.
• Der Content-Einbettungscode enthält nicht Ihren HubSpot-Tracking-Code. Sie müssen den Tracking-Code separat auf externen Seiten installieren, um HubSpot-Funktionen wie Traffic-Analytics und Banner zur Datenschutzeinwilligung nutzen zu können.
• Um Inhalte über den Einbettungscode einzubetten, fügt HubSpot die Content-Einbettung über die standardmäßige hs-sites-Domain-Fußzeile ein. So bleiben Ihre domainspezifischen Fußzeilen erhalten. Alle Inhalte, die in der hs-sites-Fußzeile enthalten sind, werden jedoch zusammen mit der Content-Einbettung in die externe Seite eingefügt. Wenn Sie beispielsweise einen Copyright-Hinweis in der hs-sites-Domain-Fußzeile haben, wird das Copyright auf der externen Seite mit dem eingebetteten Inhalt angezeigt. Erfahren Sie, wie Sie Inhalte in domainspezifischen Fußzeilen ändern.
  
  

Best Practices für das Einbetten von Inhalten verstehen

Je nachdem, wie Sie den Einbettungscode verwenden, ist es möglich, dass sich der Inhalt auf den Cumulative Layout Shift (CLS)-Score Ihrer Seite auswirkt. Dieser misst, wie stark sich Ihr Seiteninhalt beim Laden im Viewport des Besuchers bewegt. Es gibt zwei Faktoren, die sich auf Ihren CLS-Score auswirken:

• Die Position der Einbettung, einschließlich der Angabe, ob sie sich ober oder unterhalb des direkt sichtbaren Bereichs befindet und wo das Skript eingebettet ist.
• Die Höhe der Einbettung, die in direktem Zusammenhang mit den in der Content-Einbettung enthaltenen Modulen steht. Je mehr Module enthalten sind, desto stärker kann sich das Layout Ihrer Seite verschieben, wenn Inhalte geladen werden.

Wenn Sie nach dem Einbetten von Inhalt negative Auswirkungen auf Ihren CLS-Score feststellen, lesen Sie die folgenden Abschnitte mit Best Practices auf mögliche Lösungen.

Einbettung unterhalb des direkt sichtbarer Bereichs

Wenn möglich, sollte der Inhalt unterhalb des direkt sichtbaren Bereichs der Seite eingebettet werden. Dies liegt daran, dass der CLS-Score für Content gilt, der oberhalb des direkt sichtbaren Bereichs angezeigt wird, da dies in der Regel der Fall ist, wenn die Seite zum ersten Mal geladen wird. Das Einbetten von Inhalten unterhalb des direkt sichtbarer Bereich reduziert anfängliche Layoutverschiebungen, die durch die Content-Einbettung verursacht werden, was die Benutzerfreundlichkeit verbessert und negative CLS-Bewertungen abmildert.

Den Speicherort des Einbettungsskripts ändern

Standardmäßig enthält der Content-Einbettungscode das Einbettungsskript (Zeile 2 unten).

<div id="hs-embed-61405464936-1wgzc8">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]">
 </script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Beim Einbetten von Inhalten auf einer externen Seite empfiehlt es sich, das Einbettungsskript an die <head> der Seite zu verschieben und nicht neben das Erstellungsskript der Einbettung.

Eine Mindesthöhe festlegen

Die Höhe des Containers der Content-Einbettung wirkt sich darauf aus, wie stark sich der Inhalt um ihn herum beim Laden verschiebt. Die Höhe des Containers hängt von den Modulen und dem enthaltenen Inhalt ab. Je mehr Inhalt in der Einbettung eingebettet ist, desto mehr verschiebt sich die Seite. 

Aus diesem Grund empfiehlt es sich, beim Einbetten Ihres Inhalts oberhalb des direkt sichtbaren Bereichs eine Mindesthöhe der Einbettung festzulegen, indem Sie eine Inline-min-height-CSS-Regel in den Einbettungscontainer-Wrapper aufnehmen.

Wenn Sie Content in ein externes CMS einbetten, stehen Ihnen im Editor für externe Seiten möglicherweise Layouoptionen zur Verfügung, mit denen Sie die Höhe der Einbettung aktualisieren können. Andernfalls können Sie diese Formatierung manuell zum Top-Level-<div>-Element des eingebetteten Inhalts hinzufügen, wie unten gezeigt.

<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Bitte beachten: Wenn Sie den eingebetteten Inhalt pro Seite anpassen, müssen Sie möglicherweise die Regel für die Mindestgröße auf jeder Seite aktualisieren, damit der Inhalt korrekt angezeigt wird.

Um die Mindesthöhe zu ermitteln, können Sie die Seite überprüfen, auf der der Inhalt eingebettet ist. Bei HubSpot-Seiten können Sie die Seitenvorschaufunktion verwenden, um die Mindesthöhe zu ermitteln, bevor Sie die Seite veröffentlichen. Erfahren Sie mehr über das Anzeigen einer Vorschau von Inhalten in WordPress. 

Beim Anzeigen der Seite mit eingebettetem Inhalt:

• Klicken Sie mit der rechten Maustaste auf die Content-Einbettung und wählen Sie Untersuchen aus.
• Bewegen Sie den Mauszeiger im Inspektorbereich über das Top-Level-<div>-Element des eingebetteten Inhalts.
• Um die berechnete Höhe anzuzeigen, zeigen einige Browser die Höhe des Containers an, wenn Sie den Mauszeiger darüber bewegen, oder Sie können in der Leiste mit den Entwicklertools auf die Registerkarte Berechnet klicken und nach dem height-Attribut suchen.