implement GTM for /learn

This commit is contained in:
Thibault Duplessis 2016-08-12 11:21:36 +02:00
parent 4c59c1c680
commit c0e58b8f6d
6 changed files with 37 additions and 4 deletions

View file

@ -0,0 +1,9 @@
@()
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KCSNJP');
window.dataLayer = [];
</script>

View file

@ -14,7 +14,8 @@ playing: Boolean = false,
openGraph: Option[lila.app.ui.OpenGraph] = None,
atom: Option[Html] = None,
chessground: Boolean = true,
withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
withLangAnnotations: Boolean = true,
withGtm: Boolean = false)(body: Html)(implicit ctx: Context)
<!doctype html>
<html lang="@lang.language">
<head>
@ -66,6 +67,7 @@ withLangAnnotations: Boolean = true)(body: Html)(implicit ctx: Context)
data-asset-url="@assetBaseUrl"
data-asset-version="@assetVersion"
data-accept-languages="@acceptLanguages.mkString(",")">
@if(withGtm) { @gtm() }
<form id="blind_mode" action="@routes.Main.toggleBlindMode" method="POST">
<input type="hidden" name="enable" value="@ctx.blindMode.fold(0,1)" />
<input type="hidden" name="redirect" value="@ctx.req.path" />

View file

@ -18,9 +18,9 @@ sideElement: document.getElementById('learn_side')
</div>
}
@round.layout(
@base.layout(
title = "Learn chess by playing",
side = side,
side = side.some,
moreJs = moreJs,
moreCss = cssTag("learn.css"),
chessground = false,
@ -28,6 +28,7 @@ openGraph = lila.app.ui.OpenGraph(
title = "Learn chess by playing",
description = "You don't know anything about chess? Excellent! Let's have fun and learn to play chess!",
url = s"$netBaseUrl${routes.Learn.index}"
).some) {
).some,
withGtm = true) {
<div id="learn_app" class="learn cg-512">@miniBoardContent</div>
}

15
ui/learn/src/gtm.js Normal file
View file

@ -0,0 +1,15 @@
var stages = require('./stage/list');
module.exports = {
onComplete: function(data, stage) {
var categ = stages.categs[stages.stageIdToCategId(stage.id)];
var complete = categ.stages.every(function(s) {
return !!data.stages[s.key];
});
if (complete) window.dataLayer.push({
'event': 'VirtualPageview',
'virtualPageURL': '/' + categ.key,
'virtualPageTitle': categ.name
});
}
};

View file

@ -3,6 +3,7 @@ var stages = require('../stage/list');
var makeLevel = require('../level');
var makeProgress = require('../progress').ctrl;
var sound = require('../sound');
var gtm = require('../gtm');
module.exports = function(opts) {
@ -28,6 +29,7 @@ module.exports = function(opts) {
else {
vm.stageCompleted(true);
sound.stageEnd();
gtm.onComplete(opts.storage.data, stage);
}
m.redraw();
}

View file

@ -1,4 +1,5 @@
var categs = [{
key: 'pieces',
name: 'Chess pieces',
stages: [
require('./rook'),
@ -9,6 +10,7 @@ var categs = [{
require('./pawn'),
]
}, {
key: 'fundamentals',
name: 'Fundamentals',
stages: [
require('./capture'),
@ -19,6 +21,7 @@ var categs = [{
require('./checkmate1'),
]
}, {
key: 'intermediate',
name: 'Intermediate',
stages: [
require('./setup'),
@ -27,6 +30,7 @@ var categs = [{
require('./stalemate'),
]
}, {
key: 'advanced',
name: 'Advanced',
stages: [
require('./value'),