Example Services

Services in Page Typoscript

To implement third-party services in the Page Typoscript using the cookie manager, you can follow these steps:

Define the headerData section in your page TypoScript configuration file. This can be done using the PAGE object and the headerData property, similar to the example below.

• Add the third-party service code to the headerData section using the PAGE object. The key here is to use the "type" attribute with a value of "text/plain". This tells the browser to only load the script if consent is given by the user. You can add as many third-party services as you need by creating additional headerData TEXT objects.

• Now Configure the cookie manager extension to load the third-party scripts only when the user gives consent. This can usually be done by adding the data-service attribute to the the scrip tag, (witch is the identifier from the Service in the Database)

Here's an example of how you can add a third-party service for Google Analytics and Microsoft Clarity using the headerData in the PAGE object:

Example: EXT:your_sitepackage/Configuration/TypoScript/page.typoscript

 page = PAGE
 page {
   headerData {
         999 = TEXT
         999.value (
             <!-- Google Tagmanager -->
             <script async type="text/plain" data-service="googleanalytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX"></script>
             <script type="text/plain" data-service="googleanalytics">
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());
               gtag('config', 'G-XXXXXXXXX');
             </script>
             <!-- Google Tagmanager End -->
         )

         888.value (
             <!-- Clarity  -->
             <script  data-service="clarity" type="text/plain">
                 (function(c,l,a,r,i,t,y){
                     c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                     t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                     y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
                 })(window, document, "clarity", "script", "XXXXXXXXX");
             </script>
             <!-- Clarity  End -->
         )

     }
 }

That's it!

By following these steps, you can add third-party services to your TYPO3 extension while ensuring that you comply with data privacy regulations and respect the user's choices regarding cookies.

Example Service from Database (No Coding)

Microsoft Clarity

Create a new Service in the Typo3 backend like Example: (Microsoft Clarity)

Copy the Clarity Code into opt_in_code

(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "[##clarityTagID##]");

This code is used to Load the Clarity Script only when the user gives consent for this Service or Category.

Create a Variable provider

The placeholder in the code above [##clarityTagID##] is replaced by the value of the variable provider.

Create an Variable for the Placeholder, or directly insert the value in the code.

• name Custom Label name (ex. Clarity ID)

• identifier clarityTagID

• value Insert your Clarity Tag ID