Auf dieser Seite findest du Beispiele wie du verschiedene Dienste einbindest.
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
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>
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>
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.
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) -->
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>
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>
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 -->
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>
Ä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>
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>
Die Erweiterung stellt ein Template ce_vimeo_klaro.html5
bereit, was du bei dem Content Element auswählen kannst.
Die Erweiterung stellt ein Template ce_youtube_klaro.html5
bereit, was du bei dem Content Element auswählen kannst.