Für eine anstehende Aktion wollen wir ein Modal Popup auf einer Seite einbinden. Um solche Funktionen sehr einfach zu realisieren gibt es eine Vielzahl von Dienstleistern. Zuletzt nutzten wir immer Sleeknote und sind eigentlich auch nicht unzufrieden.
Im Grunde nutzen wir immer wieder die gleiche, sehr einfache Funktion zur Darstellung eines Modal-Popups und dafür buchen wir den Dienst nur für einen sehr kurzen Zeitraum. Vielleicht können wir mit Google Optimize die gleiche Funktion erreichen?
Da wir Google Optimize aktuell an der Stelle noch nicht einsetzen, brauche ich einen schnellen Testaufbau. Dazu erstelle ich eine einfache HTML-Seite mit der Zielseite als füllenden Hintergrund. Im Grunde wird also nur der Screenshot meiner Seite angezeigt. Das erleichtert die Vorstellung der Funktion enorm.
Dazu baue ich also folgende Seite:
<html>
<head>
<!-- Anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-W83DW8V':true});</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143120247-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-143120247-1',{ 'anonymize_ip': true, 'optimize_id': 'GTM-W83DW8V'} );
</script>
<!-- Google Tag Manager -->
<script>(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-5K6P2NM');</script>
<!-- End Google Tag Manager -->
<style>
body{
margin: 0;
padding: 0;
}
#content{
background-image: url("screenshot.jpg");
background-repeat: none;
height: 3766px;
}
</style>
<title>Weihnachtsaktion</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5K6P2NM"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="content"></div>
</body>
</html>
Einen großen Teil machen die Google-Tags aus. Auf dieser Grundlage kann ich nun bequem testen. Google-Tag-Manager, Google-Analytics und Optimize sind jeweils für eine Subdomain eingerichtet und dort ist die Seite jetzt erreichbar.
Der Test kann starten. Die Integration hat geklappt und mein Testaufbau fühlt sich für den ahnungslosen Beobachter erst einmal echt an. Im nächsten Step werde ich versuchen ein Modal-Popup zu bauen und das entsprechend in einem Artikel dokumentieren.
Der Beitrag Google Optimize – Schneller und einfacher Test in 10 Minuten erschien zuerst auf Technerd.