Ulkoisien medioiden upotus elementtien lisääminen verkkokauppaan

Päivitetty: 19.09.2023

Videoita ja muuta mediaa voi upottaa sivuille iframe tyyppisinä upotuskoodeina kenttiin, jotka tukevat HTML koodin upottamista. Näitä kenttiä ovat mm. tuotteen kuvaus ja pitkä kuvaus kentät ja markkinointiryhmän kuvaus ja verkkokaupan työkalut.

Upotuskoodeja tarjoavat mm. Youtube ja Vimeo videopalvelut.

Varoitukset ja huomiot

Koska upotus tapahtuu ulkopuolisesta palvelusta, niin niiden toiminnallisuutta ei voida etukäteen taata. Upotuskoodit ottavat yhteyden verkkokaupan ulkopuoliseen palveluun, jonka toiminnasta ja sisällöstä vastaa kyseinen palvelu.

Suosittelemme tutustumaan upotettavan palvelun ehtoihin ja varmistamaan ennen upotusta, että kyseinen palvelu on yleisesti tunnettu ja turvallinen.

Ulkoisien palvelujen kytkeminen voi aiheuttaa epätoivottua toimintaa verkkosivuilla, kuten

- Verkkokaupan hidastumista ja SEO pisteiden laskemista
- Käyttäjien seurantaa vaikka seuranta olisi verkkokaupalta kielletty
- Käyttäjän tietojen kalastelua
- Verkkosivun ulkoasun tilapäistä sotkeentumista
- Viruksien, haitta- tai vakoiluohjelmien tai evästeiden latautumista vierailijalle
- Ylimääräistä datan käyttöä ja kustannuksia asiakkaille
- Upotettu elementti saatetaan estää kokonaan asiakkaan selaimen toimesta
- Upotettu elementti voi pyrkiä vakoilemaan verkkokauppaa ja kalastelemaan verkkokaupan tietoja

Upotuskoodin lisääminen tuotteelle

Managerista tuotteen muokkaus sivulta, tuotteelle voi lisätä upotuskoodin kuvaus tai pitkä kuvaus kenttään kopioimalla ja liittämällä. Pitää kuitenkin ottaa huomioon, että asetuksista riippuen kuvaus kenttä saattaa sitä klikkaamalla avata erillisen tekstieditorin. Tähän koodia ei voi suoraan liittää, vaan editorista pitää painaa vasemmasta yläkulmasta "Koodi" painiketta, jotta raaka HTML koodi paljastuu, jonka jälkeen upotuskoodin voi lisätä.

Vahva suosituksemme on, että upotukset lisätään aina pitkä kuvaus kenttään, joka avautuu katsottavaksi vasta kun tuotteen avaa.

Kun koodi on esillä, alempaan teksti boksiin voi lisätä raakaa koodia. Tämän huomaa mm. siitä, että lähes kaikki muut lisätoiminnot menevät editorin yläreunasta harmaaksi.

Upotuskoodin lisääminen markkinointiryhmälle

Upotuskoodin voi lisätä myös markkinointiryhmän kuvaukseen. Sellaisissa paikoissa, joissa HTML koodia tulkitaan, näytetään myös kaikki HTML sisältö. Esimerkiksi verkkokaupan etusivulla markkinointiryhmän kuvaus näytetään otsikon ja tuotteiden välissä.

• Avaa Tuotteet -> Markkinointiryhmät
• Klikkaa markkinointiryhmätyyppiä
• Klikkaa muokattavaa markkinointiryhmää
• Liitä upotuskoodi kuvaus kenttään

Esimerkki: upotuskoodin hakeminen Youtube palvelusta

Tässä pikainen ohje, miten Youtube videopalvelusta haetaan upotus koodi videolle, jonka voi liittää verkkokauppaan.

Ensiksi sinun tulee avata YouTube palvelusta haluamasi video. Voit pysäyttää videon, mikäli et halua sen soivan taustalla.

Sen jälkeen paina Jaa painiketta.

Tämän jälkeen valitse jakotavaksi Upota

Voit valita upotukselle sopivat asetukset jako ruudun vasemmasta laidasta rullaamalla hieman alaspäin.

Lopuksi kopioi upotuskoodi kentästä.

Tämän koodin voi sitten liittää verkkokauppan tekstikenttään.

Mitä muuta voin upottaa kuin videoita?

Esimerkiksi sosiaalisen median teksti ja kuva postauksia voi jaella mm. X (ent. Twitter), Instagram ja Facebook palveluista. On myös sivustoja, joista voi upottaa ääntä tai jopa jonkin toiminnallisen web applikaation, kuten laskimen.

Upotuskoodeilla voidaan myös lisätä mm. uutiskirje sovellusten tilaus kenttiä ja monia muita toimintoja verkkosivulle. Verkkosivuille voidaan myös lisätä koko sivun kattavia tai kelluvia toiminteita, kuten chat sovellus Tawk.to, mutta nämä tulee lisätä verkkokaupan parametreistä ja opastamme näiden käytön erikseen, koska niiden kanssa tulee olla erityisen tarkkana.

Upotetun elementin muotoilun muokkaus

Upotetut elementit pyrkivät usein täyttämään kaiken vapaana olevan tilan siten, että elementin leveyden ja korkeuden suhde säilyy, ellei elementtiin ole määritelty jotain oletus kokoa. Joskus tämä ei kuitenkaan ole toivottavaa, koska elementti voisi olla pienempikin.

Elementin muodon säätö vaatii HTML / CSS osaamista ja voimme yhdessä kanssanne tehdä esimerkiksi jonkin oletus muotoilun, jolloin jatkossa elementtien lisääminen samaan kohtaan, esim. tuotteen pitkään kuvaukseen, keskittyvät ja muotoutuvat samalla tavalla.

Kuitenkin esimerkiksi Youtube upotuksessa voi nähdä parametrit 'width="560px"' ja 'height="315"', nämä säätelevät leveyttä ja korkeutta ja ovat oletuksena näin, mutta eivät välttämättä toimi jokaiselle sivustopohjalle tai jokaisellel laitteelle kunnolla sellaisenaan. Esimerkiksi suurelle PC ruudulle levennetty video ei näkyisi älypuhelimen ruudulta kokonaan. Tällöin tarvitaan kehittyneempää muotoilun säätelyä.