Dienste

Auf dieser Seite findest du Beispiele wie du verschiedene Dienste einbindest.

Anpassungen für das HTML-Code Element

Je nach Inhalt, kann es sein das weitere Einträge bei Erlaubte HTML-Tags und Erlaubte HTML-Attribute notwendig sind.

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

FundraisingBox (iframe)

Folgende Angaben müssen im <script-Tag enthalten sein: type="text/plain" data-type="text/javascript" data-src="..." data-name="fundraisingbox".

Bei dem <a>-Tag fügst du data-name="fundraisingbox" hinzu.

<script type="text/plain" data-type="text/javascript" data-src="https://secure.fundraisingbox.com/app/paymentJS?hash=12345..." data-name="fundraisingbox"></script>
<noscript>Bitte Javascript aktivieren</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

Wähle das von der Klaro-Erweiterung bereitgestellte Template analytics_google.html5 aus und binde es im Layout ein oder passe das Template entsprechend an. Wichtig sind die Angaben im <script>-Tag.

<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

Das Beispiel bezieht sich das Contao Google Maps Bundle und ist erst ab der Klaro-Version 1.1.1 verfügbar.

Damit im Frontend folgender Hinweis erscheint, muss in den Einstellungen der Google Maps Karte (Inhalte -> Google Maps -> Werkzeug-Icon) ganz unten bei Template gmap_map_klaro.html.twig ausgewählt werden.

Google Tag Manager

Füge folgenden Code soweit oben wie möglich im <head> ein. Wichtig sind hier die Angaben im <script>-Tag: 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 -->

Füge folgenden Code außerdem direkt nach dem eröffnenden <body>-Tag ein. src muss durch data-src ersetzt werden. Außerdem fügst du noch das data-name="google-tag-manager" ein.

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

Füge im -Tag folgende Angaben hinzu: 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

Wähle das von der Klaro-Erweiterung bereitgestellte Template analytics_matomo.html5 aus und binde es im Layout ein oder passe das Template entsprechend an. Wichtig sind die Angaben im <script>-Tag.

<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

Füge dem <script>-Tag folgende Angaben hinzu: data-type="application/javascript" type="text/plain" data-name="meta-pixel".

Ersetze bei dem <img>-Tag das src durch data-src und füge data-name="meta-pixel" hinzu.

<!-- 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)

Ersetze bei dem <iframe>-Tag src durch data-src und füge data-name="mixcloud" hinzu.

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

Ändere beim <iframe>-Tag das src zu data-src und füge data-name="soundcloud" hinzu.

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

Ersetze bei dem <iframe>-Tag src durch data-src und füge data-name="spotify" hinzu.

<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

Die Erweiterung stellt ein Template ce_vimeo_klaro.html5 bereit, was du bei dem Content Element auswählen kannst.

YouTube-Video

Die Erweiterung stellt ein Template ce_youtube_klaro.html5 bereit, was du bei dem Content Element auswählen kannst.