Legg inn innhold ved hjelp av en innbyggingskode
Sist oppdatert: oktober 1, 2024
Gjelder for:
Content Hub Professional , Enterprise |
Med funksjonen for innebygging av innhold kan du opprette innholdsseksjoner i HubSpot og deretter bygge dem inn på nettstedet ditt. For å legge til en innholdsinbygging på en ekstern nettside kan du enten bruke plugin-modulen for innholdsinbygging i WordPress' Gutenberg-editor, eller kopiere innbyggingskoden direkte i HubSpot.
Nedenfor finner du mer informasjon om hvordan du kopierer den innebygde innholdskoden, samt beste praksis for å opprettholde sidens CLS-poengsum (Cumulative Layout Shift).
Merk: Innebygd innhold lastes ikke inn gjennom en iframe, men injiseres via JavaScript. Søkemotorer kan utføre JavaScript og vil fange opp det innebygde innholdet, slik at du unngår SEO-utfordringer som iframes kan medføre.
Kopier den innebygde koden
Slik kopierer du innbyggingskoden for en seksjon med innebygd innhold:
- Gå til Innhold > Integreringer i HubSpot-kontoen din.
- Hold musepekeren over en innbygging, klikk deretter på Mer og velg Hent innbyggingskode.
- I dialogboksen klikker du på Kopier for å kopiere innbyggingskoden.
Du kan deretter lime inn innebyggingskoden i det eksterne innholdet etter behov. Husk følgende når du limer inn innbyggingskoden:
- En innholdsinbygging får sin styling fra siden den er innebygd på, ikke fra HubSpot. Hvis du vil justere utseendet til det innebygde innholdet, må du oppdatere sidens CSS. Hvis du bruker WordPress, kan du lære hvordan du legger til tilpasset CSS.
- Den innebygde innholdskoden inkluderer ikke HubSpot-sporingskoden din. Du må installere sporingskoden separat på eksterne sider for å dra nytte av HubSpot-funksjoner som trafikkanalyse og private samtykkebannere.
- For å bygge inn innhold via den innebygde koden, setter HubSpot inn det innebygde innholdet gjennom standard
hs-sites
-domeneets bunntekst. Dette bidrar til å bevare dine domenespesifikke bunntekster. Alt innhold som er inkludert i bunnteksten påhs-sites
, vil imidlertid bli satt inn på den eksterne siden sammen med det innebygde innholdet. Hvis du for eksempel har en ansvarsfraskrivelse for opphavsrett i bunnteksten forhs-sites
-domenet, vil opphavsretten vises på den eksterne siden sammen med det innebygde innholdet. Lær hvordan du endrer innhold i domenespesifikke bunntekster.
Forstå beste praksis for innbygging av innhold
Avhengig av hvordan du bruker den innebygde koden, er det mulig at innholdet kan påvirke sidens CLS-poengsum (Cumulative Layout Shift), som måler hvor mye innholdet på siden beveger seg rundt i den besøkendes visningsvindu under innlasting . Det er to faktorer som vil påvirke CLS-poengsummen:
- Plasseringen av den innebygde teksten, inkludert om den er over eller under folden, og hvor skriptet er innebygd.
- Høyden på innebyggingen, som er direkte relatert til modulene som er inkludert i det innebygde innholdet. Jo flere moduler som er inkludert, desto mer kan sideoppsettet forskyve seg når innholdet lastes inn.
Hvis du ser en negativ innvirkning på CLS-poengsummen din etter å ha lagt inn innhold, kan du se gjennom avsnittene om beste praksis nedenfor for å finne mulige løsninger.
Bygg inn under folden
Når det er mulig, bør innhold legges inn under folden på siden. Dette er fordi CLS-poengsummen gjelder for innhold over folden, siden det vanligvis er det den besøkende ser ved første innlasting av siden. Ved å bygge inn innhold under folden reduserer du eventuelle innledende layoutforskyvninger forårsaket av det innebygde innholdet, noe som forbedrer brukeropplevelsen og reduserer den negative CLS-poengsummen.
Endre plasseringen av det innebygde skriptet
Som standard inneholder koden for innbygging av innhold innbyggingsskriptet (linje 2 nedenfor).
<div id="hs-embed-61405464936-1wgzc8">
<script type="text/javascript" src="[EMBED SCRIPT SRC]">
</script> <script>
hbspt.content.create({...});
</script>
</div>
Når du bygger inn innhold på en ekstern side, anbefales det å flytte innbyggingsskriptet til <head>
på siden i stedet for ved siden av skriptet for oppretting av innbygging.
Angi en minimumshøyde
Høyden på den innebygde innholdsbeholderen vil påvirke hvor mye innholdet rundt den forskyves under innlasting. Høyden på beholderen avhenger av modulene og innholdet som er inkludert - jo mer innhold som er innebygd, desto mer vil siden forskyve seg.
Hvis du bygger inn innhold over folden, anbefales det derfor å angi en minimumshøyde for innbyggingen ved å inkludere en inline min-height
CSS-regel i innpakningen til den innebygde containeren.
Hvis du bygger inn innhold i et eksternt CMS, kan det hende at det finnes layoutalternativer i redigeringsprogrammet for den eksterne siden som gjør det mulig å oppdatere høyden på innbyggingen. Ellers kan du legge til denne stylingen manuelt i det innebygde innholdets toppnivå <div>
, som vist nedenfor.
<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>
Merk: Hvis du tilpasser det innebygde innholdet per side, kan det hende du må oppdatere regelen for minimumshøyde på hver side slik at innholdet vises på riktig måte.
For å finne minimumshøyden kan du inspisere siden der innholdet er innebygd. For HubSpot-sider kan du bruke funksjonen for forhåndsvisning av sider for å finne minimumshøyden før du publiserer siden. Finn ut mer om forhåndsvisning av innhold i WordPress.
Mens du viser siden med det innebygde innholdet:
- Høyreklikk på det innebygde innholdet, og velg Inspiser.
- I inspektørpanelet holder du musepekeren over det øverste nivået
<div>
for det innebygde innholdet. - For å se den beregnede høyden vil noen nettlesere vise høyden på beholderen når du holder musepekeren over den, eller du kan klikke på fanen Beregnet i skuffen med utviklerverktøy og se etter høydeattributtet.