Omat skriptit

Omien skriptien editori, jossa ulkoisia ja upotettuja skriptimerkintöjä — Verkkokauppa > Omat skriptit

Omat skriptit -sivulla voit lisätä skriptejä verkkokauppasi <head>-osioon — analytiikkaa, tagienhallintaa, chat-widgettejä tai muita kolmannen osapuolen työkaluja varten. Jokainen skripti puhdistetaan palvelimella ennen tallennusta.

Skriptit suoritetaan julkaistussa verkkokaupassasi, ja niillä on pääsy sivuun. Lisää koodia vain lähteistä, joihin luotat.

Skriptityypit

Skriptejä voi lisätä kahta tyyppiä:

Tyyppi	Mikä se on	Kentät
External	Lataa skriptin URL-osoitteesta	`src`, valinnaiset `async` ja `defer` sekä joukko sallittuja attribuutteja
Inline	Suorittaa suoraan liittämäsi skriptisisällön	`content`

Esimerkit

<script
  src="https://example.com/analytics.js"
  async
  data-website-id="abc123"
></script>

window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');

Ulkoiset skriptit muodostetaan <script>-tagiksi, jossa on antamasi URL ja attribuutit. Upotetut skriptit kääritään <script>-tagiin automaattisesti — liitä vain JavaScript, ei ympäröiviä tageja.

Skriptitagin liittäminen

Sen sijaan, että täyttäisit kentät yksitellen, voit liittää kokonaisen <script>-tagin. Avaa minkä tahansa ulkoisen skriptin kohdalla osio Paste a script tag, liitä koko tagi ja napsauta Parse tag. Editori poimii automaattisesti src-arvon, lataustavan (async/defer) ja sallitut attribuutit. Jos liitetty tagi sisältää kiellettyjä attribuutteja (kuten tapahtumakäsittelijöitä, esimerkiksi onload) tai src-arvon, joka ei ole HTTPS, editori näyttää virheilmoituksen ja hylkää liittämisen.

Turvakontrollit

Nämä säännöt astuvat voimaan tallennettaessa — virheelliset skriptit hylätään tai puhdistetaan automaattisesti:

Ulkoisen skriptin src-arvon on oltava https://. Vain absoluuttiset HTTPS-osoitteet. http:-, javascript:-, data:- ja file:-osoitteet sekä protokollattomat (//host) osoitteet hylätään.
Upotettu sisältö aidataan. </script-lopetustagin merkkijono poistetaan, jotta upotettu koodi ei voi murtautua ulos <script>-tagistaan.
Attribuutit ovat sallittujen listalla. Ulkoisissa skripteissä säilytetään src-, async- ja defer-attribuuttien lisäksi vain nämä: id · crossorigin · integrity · nonce · referrerpolicy · fetchpriority · type · nomodule — sekä mikä tahansa data-*-attribuutti. Tapahtumakäsittelijäattribuutit (onload, onerror ja muut on*) poistetaan — ne ovat XSS-hyökkäysvektori.

Omia skriptejä ei koskaan ladata maksusivuilla — katso alla oleva Maksusivut-osio.

Maksusivut

Kolme reittiperhettä joko näyttää maksun tai johtaa suoraan siihen. TWICE Commerce soveltaa niihin PCI DSS -sääntöjä, jotka eivät koske muuta verkkokauppaasi:

Sivut	Polku
Kassa, mukaan lukien vahvistusvaihe	`/checkout/…`
Kassalinkit, jotka lähetetään hallintapaneelista	`/link/…`
Kestotilausportaali	`/account/…`

Tästä seuraa kaksi asiaa. Omat skriptisi eivät koskaan suoritu niillä. Nämä sivut ohittavat headScripts-arvot kokonaan, joten mikään lisäämäsi skripti — analytiikka, tagienhallinta, chat-työkalu, suostumustyökalu — ei lataudu millään niistä. Tämä koskee myös tilausvahvistusvaihetta, joten et voi laukaista ostoseurantaa selaimesta sillä hetkellä, kun tilaus tehdään. Seuraa valmistuneita tilauksia sen sijaan palvelinpuolella order.created-webhookista. TWICE Commerce lataa niillä yhden oman skriptinsä. Nämä sivut, ja vain nämä sivut, lataavat selainpuolen skriptivalvonnan osoitteesta csidetm.com. Se täyttää PCI DSS v4.0 -vaatimuksen 6.4.3 (luettelo ja eheystarkistus jokaisesta maksusivun skriptistä) ja 11.6.1 (peukaloinnin havaitseminen sivun skripteistä ja HTTP-otsakkeista). TWICE Commerce ylläpitää sitä yhdellä alustatilillä: sen URL-osoitteen numerosarja yksilöi TWICE Commercen, ei sinua, ja on identtinen jokaisen kauppiaan kaupassa. Se ladataan renderöintiä estävästi, joten se on paikallaan ennen kuin maksulomakkeen omat skriptit suoritetaan. Nämä kaksi ovat toistensa täydelliset vastakohdat — siellä, missä omat skriptisi suoritetaan, valvontaa ei ole, ja siellä, missä valvonta suoritetaan, omia skriptejäsi ei ole. Ne eivät koskaan lataudu samalle sivulle.

Maksusivulta poistuminen lataa dokumentin uudelleen sen sijaan, että siirtyisi selainpuolella, joten odota täyttä sivunlatausta, kun asiakas siirtyy kassalta takaisin verkkokauppaasi. Tämä on tarkoituksellista: se pysäyttää valvonnan sillä hetkellä, kun asiakas poistuu maksusivulta.

Käyttö

Avaa Omat skriptit verkkokaupan editorissa.
Lisää External- tai Inline-skripti.
Anna ulkoisille skripteille https://-osoite ja valitse lataustapa (async, defer tai estävä) — tai täytä kentät kopioidusta <script>-tagista toiminnolla Paste a script tag.
Lisää tarvittaessa sallitut attribuutit (esim. data-*, id, integrity).
Tallenna. Skripti puhdistetaan ja tallennetaan, minkä jälkeen se lisätään verkkokaupan <head>-osioon seuraavalla latauksella.

Verkkokaupan DOM-tunnusten kohdentaminen

Verkkokauppa tarjoaa kaksi pysyvää DOM-tunnusta, joita head-skriptisi voivat kohdentaa lisätäkseen omaa sisältöä alatunnisteeseen — esimerkiksi evästeasetusten linkin.

Tunnus	Elementti	Milloin läsnä
`twice-footer`	Alatunnisteen asettelun juuri	Aina, kun alatunniste näytetään
`twice-footer-links`	Käytäntölinkkien rivi	Vain kun vähintään yksi käytäntölinkki on näkyvissä

Ankkurit (<a>), jotka lisätään suoraan elementin #twice-footer-links alle, perivät automaattisesti käytäntölinkkien tyylit (typografia, väri, ei alleviivausta). Skriptisi ei tarvitse toistaa teeman tyylejä.

Nämä tunnukset ovat pysyviä — niiden uudelleennimeäminen rikkoisi kauppiaiden skriptit. Älä luota mihinkään muuhun verkkokaupan DOM-rakenteeseen tai luokkanimeen, sillä ne voivat muuttua ilman ennakkoilmoitusta.

Esimerkki: evästeasetusten linkin lisääminen

Tämä upotettu skripti lisää ”Cookie Settings” -linkin alatunnisteen käytäntölinkkien riville. Se odottaa DOM:n latautumista ja lisää sitten linkin niin, että se vastaa ulkoasultaan olemassa olevia käytäntölinkkejä.

(function () {
  function addCookieLink() {
    var row = document.getElementById('twice-footer-links');
    if (!row) return;
    var link = document.createElement('a');
    link.href = '#';
    link.textContent = 'Cookie Settings';
    link.addEventListener('click', function (e) {
      e.preventDefault();
      // Replace with your consent manager's open command, e.g.:
      // window.CookieScript && window.CookieScript.instance.show();
    });
    row.appendChild(link);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addCookieLink);
  } else {
    addCookieLink();
  }
})();

Omia skriptejä ei suoriteta maksusivuilla (katso yllä oleva Maksusivut-osio). Alatunnistetta ei myöskään näytetä niillä, joten DOM-tunnusten kohdentaminen rajoittuu verkkokaupan sivuihin.

Tervetuloa TWICE-dokumentaatioon

Liikkuminen TWICEssä

Järjestelmän ymmärtäminen

Skriptityypit

Esimerkit

Skriptitagin liittäminen

Turvakontrollit

Maksusivut

Käyttö

Verkkokaupan DOM-tunnusten kohdentaminen

Esimerkki: evästeasetusten linkin lisääminen

Aiheeseen liittyvät

Oma CSS

Verkkokaupan yleiskatsaus

​Skriptityypit

​Esimerkit

​Skriptitagin liittäminen

​Turvakontrollit

​Maksusivut

​Käyttö

​Verkkokaupan DOM-tunnusten kohdentaminen

​Esimerkki: evästeasetusten linkin lisääminen

​Aiheeseen liittyvät

Oma CSS

Verkkokaupan yleiskatsaus

Skriptityypit

Esimerkit

Skriptitagin liittäminen

Turvakontrollit

Maksusivut

Käyttö

Verkkokaupan DOM-tunnusten kohdentaminen

Esimerkki: evästeasetusten linkin lisääminen

Aiheeseen liittyvät