Na XIV edycji Web Analytics Wednesday Jacek Kowalski opowiedział nam o bardzo prostych w teorii tematach: jak śledzić odsłony, jak wpiąć pixel remarketingowy, jak zintegrować ze stroną tag managera. Gdzie jest haczyk? Integracja dotyczy serwisu bankowego o najwyższym poziomie bezpieczeństwa i wszystkie znane rozwiązania można wyrzucić do kosza.

1. Analityka i marketing w
bezpiecznych serwisach
bankowych
Case Study FinAi.pl

2. 1. Co zamiast Google Analytics? - Jak zbudowaliśmy własny
system zbierania telemetrii?
2. Śledzenie konwersji i tworzenie list remarketingowych
bez JavaScript
3. 3rd party JavaScript
4. Jak zbudować własny Tag Manager?
5. RODO i tajemnica bankowa

3. Bezpieczeństwo w analityce i marketingu
Główne problemy:
• Dane osobowe
• 3rd party JavaScript
• Brak kontroli i dostępu do danych – np. Google Analytics

4. Alternatywy dla Google Analytics
Naprościej:
• Matomo (dawniej Piwik) - https://matomo.org/
• Open Web Analytics - http://www.openwebanalytics.com/
• Microsoft Application Insights – słabe dla marketingu
Lvl Hard:
• Własna biblioteka JS zbierająca telemetrię
• Mikroserwis przyjmujący eventy / Kafka / Azure EventHub/ AWS
Kinesis
• ETL przetwarzający eventy – Event Sourcing!
• Hurtownia – SQL Server, Postgres, MySql

5. Marketing – pixle konwersji i remarketing
Google Ads – w nowym widoku tylko JS!
<!-- Event snippet for TestRegistration conversion page -->
<script>
gtag('event', 'conversion', {'send_to': 'AW-
846677157/O2E9CMWC_38QpIndkwM'});
</script>
Ale można tak:
<img src=
„//www.googleadservices.com/pagead/conversion/846677157/?label=O2E9
CMWC_38QpIndkwM&guid=ON&script=0&userId={USERID}”>

6. Marketing – pixle konwersji i remarketing
Google Ads – w nowym widoku tylko JS!
<script>
gtag('event', 'page_view', {
'send_to': 'AW-846677156’,
'user_id': 'replace with value'
});
</script>
Ale można tak:
//googleads.g.doubleclick.net/pagead/viewthroughconversion/84667715
6/?guid=ON&script=0&userId={{UserId}}

7. Marketing – Facebook Pixel
<img height="1" width="1"
style="display:none"
src=
"https://www.facebook.com
/tr?id=948336325308715&ev
=PageView&noscript=1"
/>

8. Marketing – DoubleClick Floodlight

9. Marketing – DoubleClick Floodlight

10. 3rd party JavaScript – zagrożenia
1. Błędy w kodzie, kolizje nazw zmiennych globalnych
2. Wykonanie złośliwego kodu na stronie
3. Przechwycenie danych – wyświetlanych jak i wprowadzanych
na stronie

11. 3rd party JavaScript– skrypty analityczne
• gtag.js
• gtm.js
• analytics.js
• fbevents.js
• Duże firmy - małe ryzyko, ale wysyłamy do Google, Facebook itp
nasze dane.

12. 3rd party JavaScript
• Marketing Automation (Mailchimp, Synerise, Emarsys itp.)
• Livechat
• UWAGA! Duże ryzyko wstrzyknięcia kodu z bugiem.
• Pamiętać o możliwości szybkiego zdjęcia tego kodu z frontu
(np. poprzez GTM)

13. 3rd party JavaScript - implementacja
Skrypt który pobiera skrypt - standard
<script>
(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', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script src="https://analytics.vendor.com/v1.1/script.js"
integrity="sha384-MBO5IDfYaE6c6Aao94oZrIOiC7CGiSNE64QUbHNPhzk8Xhm0djE6QqTpL0HzTUxk"
crossorigin="anonymous"></script>

14. 3rd party JavaScript - implementacja
Skrypt serwowany samemu:
• Code review
• Self-hosted
• Kontrolujemy ryzyko downtime
• W sumie to prościej użyć <script src=„…” integrity=„…”>

15. 3rd party JavaScript - sandboxing
Skrypt serwowany w sandbox z iframe:
<iframe src="https://my-website.com/analytics.html"
sandbox="allow-same-origin allow-scripts"></iframe>
Źródło:
https://www.owasp.org/index.php/3rd_Party_Javascript_
Management_Cheat_Sheet
my-website.com/index.html
IFRAME:
my-website.com/analytics.html
ifrElement.contentWindow.postMessage
window.addEventListener('message')
window.addEventListener('message’)
window.parent.postMessage

16. Finai Tag Manager
Tag Manager składa się z:
1. Frontu do konfiguracji
2. Serwera serwującego konfigurację do przeglądarek
3. Skryptu JS na stronie interpretującego konfigurację, uzupełniającego
placeholdery/zmienne
Ad. 1: JSON
Ad. 2: CDN
Ad. 3: var script = document.createElement("script");
var scriptText = document.createTextNode(js);
script.appendChild(scriptText);
document.body.appendChild(script);

17. Finai Tag Manager
[{
"Description": "DCM KredytomatRegistration",
"type": "pixel",
"uriTemplate": "https://ad.doubleclick.net/ddm/activity/...",
"trigger": "PageView",
"path": "/profile",
"isEnabled": true
},
{
"Description": "GA virtual page view",
"type": "js",
"jsTemplate": "(function(){var img = document.createElement('img');...",
"trigger": "PageView",
"path": null,
"isEnabled": true
}]

18. RODO, dane osobowe, tajemnica bankowa
• W bankowości wszystko jest trudniejsze
• Dane osobowe lub tajemnica bankowa mogą być wszędzie
• W URLu też!

19. Koniec!