> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Integrating tracking

> Integrate external tracking services such as Matomo or Google Analytics into the shop, either via the tracking interface or directly in the template.

Which paths visitors take through the shop, where they drop off and which campaign actually brings in orders: no shop system answers these questions on its own. For this, you integrate a tracking service, and WEBSALE V8s offers two ways to do so.

> [!WARNING]
>
> According to current case law, tracking, cookies and comparable tools for advertising effectiveness research may only transmit data once the visitor has actively consented. A notice is not sufficient, and pre-ticked checkboxes are not permitted. Clarify the implementation with your data protection officer before carrying out any of the following steps.

Guide: Consent to data processing (cookies)

## The two ways

| | Via the tracking interface | Directly in the template |
| - | - | - |
| Where the code is located | Collected in the file `ws_analyse.js` | In the template or in an include section |
| What the template contains | The tag `WS-ExternalStatistics` | The code itself |
| Activation | To be requested from WEBSALE | None |
| Strength | All service providers in one place, changes without editing templates | No dependency on the interface |

Both ways can be used side by side. For a service that constantly changes its own code, the interface is the more low-maintenance solution.

## Way A: via the tracking interface

### Step 1: Activation

The tracking interface must be activated for your shop. Contact WEBSALE AG to do this.

### Step 2: Copy the code into ws\_analyse.js

The file `ws_analyse.js` in the shop directory holds the scripts of all tracking service providers. If a provider supplies its own file with this name, transfer its content into the existing file instead of replacing it.

Put comment lines around each section. With four service providers in one file, this makes the difference between five minutes and an hour when something needs to be changed later.

```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// *******************************************************
// Beginn Google Analytics
// *******************************************************

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

// *******************************************************
// Ende Google Analytics
// *******************************************************
```

### Step 3: Set the tag in the template

The tag belongs in the `<head>` section of every template on which measurements should be taken.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   ...
   ~WS-ExternalStatistics~
   ...
</head>
```

Reference: WS-ExternalStatistics

Guide: Description of the tracking interface

Materials: Example of tracking on a shop page

## Way B: directly in the template

Tracking usually belongs on all shop pages. Instead of copying the code into every template, create an include section in the FastInclude file `incl_fast_includes.htm` and include it everywhere.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Incl-Tracking}
   <script async src="https://www.googletagmanager.com/gtag/js?id=IHRE_MESS-ID"></script>
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'IHRE_MESS-ID');
   </script>
{/Incl-Tracking}
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   ...
   ~WS-Fast_Include(Incl-Tracking)~
   ...
</head>
```

Guide: Include sections

Reference: WS-Fast\_Include() · WS-Fast\_Include2…4()

## Provider examples

Get the code from your account with the respective service and replace all placeholders in it with your own identifiers.

Matomo:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);

(function() {
  var u="//ihr-matomo-server.de/";
  _paq.push(["setTrackerUrl", u+"matomo.php"]);
  _paq.push(["setSiteId", "IHRE_MATOMO_SITEID"]);
  var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0];
  g.type="text/javascript"; g.async=true; g.src=u+"matomo.js"; s.parentNode.insertBefore(g,s);
})();
</script>
```

Google Analytics:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=IHRE_MESS-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'IHRE_MESS-ID');
</script>
```

> [!WARNING]
>
> Older instructions for Google Analytics still show the code using `_gaq` and `ga.js` with an identifier in the form `UA-…`. This code no longer measures anything. Use the code from your Google account, which relies on `gtag.js` and a measurement ID in the form `G-…`.

## Special case: Google Conversion Tracking

Google Conversion Tracking is part of Google Ads. You need a Google Ads account for it; when you sign up, you receive your customer ID.

> [!WARNING]
>
> For conversion tracking, Google recommends direct integration in the template. Do not use the tracking interface for this; instead, place Google's code in every template to be measured, at the location described by Google.

## Passing umlauts and special characters

The shop delivers its content in the character encoding specified in its configuration, usually ISO 8859-1. Many tracking services, however, expect UTF-8. If you pass a value containing umlauts unchanged, garbled characters arrive at the other end.

For this case, there is `DC-FP1_convertToEncoding()`. The value is placed in a free placeholder, re-encoded and then output.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~DC-FP1_reset~
~DC-FP1_set($WS-Search$)~
~DC-FP1_convertToEncoding($WS-Charset$,UTF-8)~
~DC-FP1_urlencoding~
```

| Line | What it does |
| - | - |
| `~DC-FP1_reset~` | Clears the placeholder; necessary if it has already been used on this template |
| `~DC-FP1_set($WS-Search$)~` | Puts the search term into it |
| `~DC-FP1_convertToEncoding($WS-Charset$,UTF-8)~` | Re-encodes from the shop's character set to UTF-8 |
| `~DC-FP1_urlencoding~` | Outputs the value URL-encoded |

> [!NOTE]
>
> The source encoding is `$WS-Charset$` rather than a fixed `ISO-8859-1`. This way, the example also works in a subshop that is set to a different encoding.

A complete example that passes the search term and product numbers to a service provider:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Cat-Data}
   {ST-DepVar_OK}
      <script type="text/javascript" src="//www.sample.de/js/inlineretarget.js?method=search&pid=%%SampleTrackingPID%%&search=~DC-FP1_reset~~DC-FP1_set($WS-Search$)~~DC-FP1_convertToEncoding($WS-Charset$,UTF-8)~~DC-FP1_urlencoding~&productIds={@PR-Data}~DC-FP1_reset~~DC-FP1_set($PR-Number$)~~DC-FP1_convertToEncoding($WS-Charset$,UTF-8)~~DC-FP1_urlencoding~;{/@PR-Data}&productSeparator=;"></script>
   {/ST-DepVar_OK}
{/Cat-Data}
```

> [!WARNING]
>
> The tag chain is deliberately written without line breaks within the `src` attribute. A line break in the middle of the address ends up in the generated address and makes the call unusable.

Reference: WS-Search · DC-FP1…5 · DC-FP1…5\_set · DC-FP1…5\_convertToEncoding() · DC-FP1…5\_urlencoding

## Checking

After integration, call up a few pages and check in the service provider's account whether the data is arriving. For Google, the Tag Assistant in the Chrome browser also helps.

Guide: Checking the setup of the web tracking code

## What to review regularly afterwards

Integration is not the end of the job. Two Google tools belong in your daily work, and they answer different questions.

| Tool | Answers | Sensible frequency |
| - | - | - |
| Google Search Console | How does Google see my shop? Which errors does the crawler report, which search queries bring visitors, has the sitemap arrived? | Weekly |
| Google Analytics | What do visitors do in the shop? Where do they come from, which content do they view, at which point do they drop off? | Daily |

Guide: Sitemaps, robots.txt and mobile subshops

## Related topics

* Guide: Description of the tracking interface
* Guide: Consent to data processing (cookies)
* Guide: Include sections
* Guide: A/B test


## Related topics

- [Integration of econda](https://dokumentation.websale.de/en/v8s/integration-von-econda/integration-von-econda.md)
- [Exchanging data with external systems](https://dokumentation.websale.de/en/v8s/externe-dienste/daten-mit-externen-systemen-austauschen.md)
- [Navigation and category tree](https://dokumentation.websale.de/en/v8s/referenz/tags/cat/navigation-und-kategoriebaum.md)
- [A/B test](https://dokumentation.websale.de/en/v8s/funktionen-zur-shop-optimierung/a-b-test.md)
- [Integrating FINDOLOGIC](https://dokumentation.websale.de/en/v8s/externe-dienste/integration-von-findologic.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.