Skip to main content
Edit page
Print whole chapter
Previous page
Next page

Services

This page shows examples of how to include various services.

Adjustments for the HTML code element

Depending on the content, additional entries under Allowed HTML tags and Allowed HTML attributes may be necessary.

Tags: <iframe><noscript>
Attributes: allow,data-name,data-src,data-type,frameborder,height,scrolling,src,width

FundraisingBox (iframe)

The <script> tag must contain the following attributes: type="text/plain" data-type="text/javascript" data-src="..." data-name="fundraisingbox".

Add data-name="fundraisingbox" to the <a> tag.

<script type="text/plain" data-type="text/javascript" data-src="https://secure.fundraisingbox.com/app/paymentJS?hash=12345..." data-name="fundraisingbox"></script>
<noscript>Please enable JavaScript</noscript>
<a href="https://www.fundraisingbox.com" target="_blank" rel="noopener noreferrer" data-name="fundraisingbox">
  <img class="no-lazy !important;" style="border: 0 !important;"
  src="https://secure.fundraisingbox.com/images/FundraisingBox-Logo-Widget.png"
  alt="FundraisingBox Logo" border="0" />
</a>

Google Analytics

Select the template analytics_google.html5 provided by the Klaro extension and include it in the layout, or adjust your template accordingly. The attributes in the <script> tag are what matters.

<script type="text/plain" data-type="application/javascript" data-name="google-analytics">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', '<?= $GoogleAnalyticsId ?>', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
</script>

Google Maps

The example refers to the Contao Google Maps Bundle and is only available from Klaro version 1.1.1.

To show the following notice in the front end, select the template gmap_map_klaro.html.twig at the very bottom of the Google Maps map settings (Content -> Google Maps -> wrench icon).

Google Tag Manager

Add the following code as high up in the <head> as possible. The attributes in the <script> tag are what matters:

data-type="application/javascript" type="text/plain" data-name="google-tag-manager".

<!-- Google Tag Manager -->
<script data-type="application/javascript" type="text/plain" data-name="google-tag-manager">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Also add the following code directly after the opening <body> tag. Replace src with data-src and add data-name="google-tag-manager".

<!-- Google Tag Manager (noscript) -->
<noscript><iframe data-name="google-tag-manager" data-src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Hotjar

Add the following attributes to the <script> tag: type="text/plain" data-type="application/javascript" data-name="hotjar".

<!-- Hotjar Tracking Code -->
<script type="text/plain" data-type="application/javascript" data-name="hotjar">
    (function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:XXXXXX,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Matomo

Select the template analytics_matomo.html5 provided by the Klaro extension and include it in the layout, or adjust your template accordingly. The attributes in the <script> tag are what matters.

<script type="text/plain" data-type="application/javascript" data-name="matomo">
  var _paq = window._paq = window._paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u='<?= $MatomoPath ?>';
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', <?= $MatomoSite ?>]);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

Meta Pixel

Add the following attributes to the <script> tag: data-type="application/javascript" type="text/plain" data-name="meta-pixel".

In the <img> tag, replace src with data-src and add data-name="meta-pixel".

<!-- Meta Pixel Code -->
<script data-type="application/javascript" type="text/plain" data-name="meta-pixel">
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none" data-name="meta-pixel" data-src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

Mixcloud (iframe)

In the <iframe> tag, replace src with data-src and add data-name="mixcloud".

<iframe width="100%" height="60" data-src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&light=1&feed=%2Fpfadfinder%2Fliquid-drum-and-bass%2F" data-name="mixcloud" frameborder="0">
</iframe>

Soundcloud Player (iframe)

In the <iframe> tag, change src to data-src and add data-name="soundcloud".

<div>
<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/224507370&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true" data-name="soundcloud">
</iframe>
<div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
	<a href="https://soundcloud.com/pfadfinder" title="Pfadfinder" target="_blank" style="color: #cccccc; text-decoration: none;">Pfadfinder</a> · 
	<a href="https://soundcloud.com/pfadfinder/mixtape-podcast-18nd-sep-2015" title="Mixtape Podcast - 18nd Sep 2015" target="_blank" style="color: #cccccc; text-decoration: none;">Mixtape Podcast - 18nd Sep 2015</a>
	</div>
</div>

Spotify (iframe)

In the <iframe> tag, replace src with data-src and add data-name="spotify".

<div class="column is-6">
	<iframe style="border-radius:12px" data-src="https://open.spotify.com/embed/show/4xXvD63BkDDalKZg6PI5mk?utm_source=generator" data-name="spotify" width="100%" height="232" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture">
	</iframe>
</div>

Vimeo video

The extension provides a template ce_vimeo_klaro.html5 that you can select in the content element.

YouTube video

The extension provides a template ce_youtube_klaro.html5 that you can select in the content element.