> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Omat skriptit

> Lisää analytiikka- ja kolmannen osapuolen skriptejä verkkokauppasi head-osioon sisäänrakennetuin turvakontrollein.

<Frame caption="Verkkokauppa > Omat skriptit">
  <img src="https://mintcdn.com/twicecommerce/J8PvWLtfo8Bk95ka/images/online-store-custom-scripts.webp?fit=max&auto=format&n=J8PvWLtfo8Bk95ka&q=85&s=122b2fadd175b96b1b477f953b9ff9c3" alt="Omien skriptien editori, jossa ulkoisia ja upotettuja skriptimerkintöjä" width="1920" height="1080" data-path="images/online-store-custom-scripts.webp" />
</Frame>

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.

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

## 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

<CodeGroup>
  ```html External script (rendered in storefront head) theme={null}
  <script
    src="https://example.com/analytics.js"
    async
    data-website-id="abc123"
  ></script>
  ```

  ```javascript Inline script (paste the JavaScript only) theme={null}
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
  ```
</CodeGroup>

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.

<Note>
  Omia skriptejä **ei koskaan ladata maksusivuilla** — katso alla oleva Maksusivut-osio.
</Note>

## 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](/docs/fi/concepts/integrations/webhooks).

**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.

<Note>
  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.
</Note>

## Käyttö

1. Avaa **Omat skriptit** verkkokaupan editorissa.
2. Lisää **External**- tai **Inline**-skripti.
3. 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**.
4. Lisää tarvittaessa sallitut attribuutit (esim. `data-*`, `id`, `integrity`).
5. 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ä.

<Warning>
  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.
</Warning>

### 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ä.

<CodeGroup>
  ```javascript Inline script theme={null}
  (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();
    }
  })();
  ```
</CodeGroup>

<Note>
  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.
</Note>

## Aiheeseen liittyvät

<CardGroup cols={2}>
  <Card title="Oma CSS" icon="paintbrush" href="/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css">
    Lisää omia tyylejä visuaalisten teema-asetusten lisäksi.
  </Card>

  <Card title="Verkkokaupan yleiskatsaus" icon="store" href="/docs/fi/sales-channels/online-store/overview">
    Määritä ja julkaise verkkokauppasi.
  </Card>
</CardGroup>
