@internetstiftelsen/styleguide 2.24.34 → 2.24.35

package/dist/molecules/glider/glider-hero.js

@@ -58,44 +58,44 @@ function initHeroGlider(node) {
 				}, parseInt(autoplayDelay, 10));
 			}
 		}, 0);
-	} else {
-		document.querySelector('.js-glider-prev').addEventListener('click', function () {
-			dataLayer.push({
-				event: 'carousel',
-				eventInfo: {
-					category: 'carousel',
-					action: 'click',
-					label: 'arrow_left'
-				}
-			});
+	}
+
+	document.querySelector('.js-glider-prev').addEventListener('click', function () {
+		dataLayer.push({
+			event: 'carousel',
+			eventInfo: {
+				category: 'carousel',
+				action: 'click',
+				label: 'arrow_left'
+			}
 		});
+	});
+
+	document.querySelector('.js-glider-next').addEventListener('click', function () {
+		dataLayer.push({
+			event: 'carousel',
+			eventInfo: {
+				category: 'carousel',
+				action: 'click',
+				label: 'arrow_right'
+			}
+		});
+	});
 
-		document.querySelector('.js-glider-next').addEventListener('click', function () {
+	[].forEach.call(gliderLinks, function (gliderLink) {
+		gliderLink.addEventListener('click', function () {
+			var linkTarget = gliderLink.href;
+			console.log(linkTarget);
 			dataLayer.push({
 				event: 'carousel',
 				eventInfo: {
 					category: 'carousel',
 					action: 'click',
-					label: 'arrow_right'
+					label: linkTarget
 				}
 			});
 		});
-
-		[].forEach.call(gliderLinks, function (gliderLink) {
-			gliderLink.addEventListener('click', function () {
-				var linkTarget = gliderLink.href;
-				console.log(linkTarget);
-				dataLayer.push({
-					event: 'carousel',
-					eventInfo: {
-						category: 'carousel',
-						action: 'click',
-						label: linkTarget
-					}
-				});
-			});
-		});
-	}
+	});
 }
 
 (0, _nodeAdded2.default)('.js-glider-hero', initHeroGlider);

package/dist/organisms/timeline/timeline.js

@@ -131,7 +131,12 @@ if (progressBar) {
 	});
 	window.addEventListener('scroll', function () {
 		animateProgressBar();
-		decadeIsVisible();
+
+		// Don't trigger Decade Visible too fast to prevent dataLayer.push
+		// to trigger while user is scrolled past a decade.
+		setTimeout(function () {
+			decadeIsVisible();
+		}, 1500);
 	});
 }
 

package/dist/organisms/video-guide/VideoGuidePlayback.js

@@ -59,6 +59,15 @@ var VideoGuidePlayback = function () {
 			_this.setForwardState(false);
 
 			_this.video.currentTime = 0;
+
+			_this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'guide_completed',
+					label: window.location.href
+				}
+			});
 		};
 
 		this.onAbort = function () {
@@ -103,6 +112,15 @@ var VideoGuidePlayback = function () {
 			if (activeCueIndex < cues.length - 1) {
 				_this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
 				_this.updateChapterState();
+
+				_this.dataLayer.push({
+					event: 'guided_tour',
+					eventInfo: {
+						category: 'guided_tour',
+						action: 'player_click',
+						label: 'Forward'
+					}
+				});
 			}
 		};
 
@@ -114,9 +132,19 @@ var VideoGuidePlayback = function () {
 			if (activeCueIndex > 0) {
 				_this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
 				_this.updateChapterState();
+
+				_this.dataLayer.push({
+					event: 'guided_tour',
+					eventInfo: {
+						category: 'guided_tour',
+						action: 'player_click',
+						label: 'Backward'
+					}
+				});
 			}
 		};
 
+		this.dataLayer = window.dataLayer || [];
 		this.video = video;
 		this.playBtn = element.querySelector('.js-play-btn');
 		this.playIcon = element.querySelector('.js-play-icon');
@@ -199,12 +227,30 @@ var VideoGuidePlayback = function () {
 		value: function setPlayActive() {
 			this.pauseIcon.classList.remove('is-hidden');
 			this.playIcon.classList.add('is-hidden');
+
+			this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'player_click',
+					label: 'Play'
+				}
+			});
 		}
 	}, {
 		key: 'setPauseActive',
 		value: function setPauseActive() {
 			this.pauseIcon.classList.add('is-hidden');
 			this.playIcon.classList.remove('is-hidden');
+
+			this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'player_click',
+					label: 'Pause'
+				}
+			});
 		}
 	}, {
 		key: 'setForwardState',

package/dist/organisms/video-guide/VideoGuideSubtitles.js

@@ -32,8 +32,20 @@ var VideoGuideSubtitles = function () {
 		this.toggleSubtitles = function () {
 			_this.subtitlesBtn.classList.toggle('is-active');
 			_this.subtitlesContainer.classList.toggle('is-visible');
+
+			_this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'player_click',
+					label: 'Subtitles'
+				}
+			});
+
+			console.log(_this.dataLayer);
 		};
 
+		this.dataLayer = window.dataLayer || [];
 		this.element = element;
 		this.video = video;
 		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.24.34",
+	"version": "2.24.35",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/molecules/glider/glider-hero.js

@@ -44,44 +44,44 @@ export function initHeroGlider(node) {
 				}, parseInt(autoplayDelay, 10));
 			}
 		}, 0);
-	} else {
-		document.querySelector('.js-glider-prev').addEventListener('click', () => {
-			dataLayer.push({
-				event: 'carousel',
-				eventInfo: {
-					category: 'carousel',
-					action: 'click',
-					label: 'arrow_left',
-				},
-			});
+	}
+
+	document.querySelector('.js-glider-prev').addEventListener('click', () => {
+		dataLayer.push({
+			event: 'carousel',
+			eventInfo: {
+				category: 'carousel',
+				action: 'click',
+				label: 'arrow_left',
+			},
 		});
+	});
 
-		document.querySelector('.js-glider-next').addEventListener('click', () => {
+	document.querySelector('.js-glider-next').addEventListener('click', () => {
+		dataLayer.push({
+			event: 'carousel',
+			eventInfo: {
+				category: 'carousel',
+				action: 'click',
+				label: 'arrow_right',
+			},
+		});
+	});
+
+	[].forEach.call(gliderLinks, (gliderLink) => {
+		gliderLink.addEventListener('click', () => {
+			const linkTarget = gliderLink.href;
+			console.log(linkTarget);
 			dataLayer.push({
 				event: 'carousel',
 				eventInfo: {
 					category: 'carousel',
 					action: 'click',
-					label: 'arrow_right',
+					label: linkTarget,
 				},
 			});
 		});
-
-		[].forEach.call(gliderLinks, (gliderLink) => {
-			gliderLink.addEventListener('click', () => {
-				const linkTarget = gliderLink.href;
-				console.log(linkTarget);
-				dataLayer.push({
-					event: 'carousel',
-					eventInfo: {
-						category: 'carousel',
-						action: 'click',
-						label: linkTarget,
-					},
-				});
-			});
-		});
-	}
+	});
 }
 
 nodeAdded('.js-glider-hero', initHeroGlider);

package/src/organisms/timeline/timeline.js

@@ -109,6 +109,7 @@ function decadeIsVisible() {
 					label: decade,
 				},
 			});
+			
 		} else if (!isInViewport(decadeSection)) {
 			decadeSection.classList.remove('is-in-view');
 		}
@@ -128,7 +129,12 @@ if (progressBar) {
 	});
 	window.addEventListener('scroll', () => {
 		animateProgressBar();
-		decadeIsVisible();
+
+		// Don't trigger Decade Visible too fast to prevent dataLayer.push
+		// to trigger while user is scrolled past a decade.
+		setTimeout(() => {
+			decadeIsVisible();
+		}, 1500);
 	});
 }
 

package/src/organisms/video-guide/VideoGuidePlayback.js

@@ -2,6 +2,7 @@ import getCurrentCueIndex from './getCurrentCueIndex';
 
 export default class VideoGuidePlayback {
 	constructor(element, video) {
+		this.dataLayer = window.dataLayer || [];
 		this.video = video;
 		this.playBtn = element.querySelector('.js-play-btn');
 		this.playIcon = element.querySelector('.js-play-icon');
@@ -77,11 +78,29 @@ export default class VideoGuidePlayback {
 	setPlayActive() {
 		this.pauseIcon.classList.remove('is-hidden');
 		this.playIcon.classList.add('is-hidden');
+
+		this.dataLayer.push({
+			event: 'guided_tour',
+			eventInfo: {
+				category: 'guided_tour',
+				action: 'player_click',
+				label: 'Play',
+			},
+		});
 	}
 
 	setPauseActive() {
 		this.pauseIcon.classList.add('is-hidden');
 		this.playIcon.classList.remove('is-hidden');
+
+		this.dataLayer.push({
+			event: 'guided_tour',
+			eventInfo: {
+				category: 'guided_tour',
+				action: 'player_click',
+				label: 'Pause',
+			},
+		});
 	}
 
 	setForwardState(active) {
@@ -155,6 +174,15 @@ export default class VideoGuidePlayback {
 		this.setForwardState(false);
 
 		this.video.currentTime = 0;
+
+		this.dataLayer.push({
+			event: 'guided_tour',
+			eventInfo: {
+				category: 'guided_tour',
+				action: 'guide_completed',
+				label: window.location.href,
+			},
+		});
 	};
 
 	onAbort = () => {
@@ -198,6 +226,15 @@ export default class VideoGuidePlayback {
 		if (activeCueIndex < cues.length - 1) {
 			this.video.currentTime = cues[activeCueIndex + 1].startTime + 0.01;
 			this.updateChapterState();
+
+			this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'player_click',
+					label: 'Forward',
+				},
+			});
 		}
 	};
 
@@ -208,6 +245,15 @@ export default class VideoGuidePlayback {
 		if (activeCueIndex > 0) {
 			this.video.currentTime = Math.max(0, cues[activeCueIndex - 1].startTime + 0.01);
 			this.updateChapterState();
+
+			this.dataLayer.push({
+				event: 'guided_tour',
+				eventInfo: {
+					category: 'guided_tour',
+					action: 'player_click',
+					label: 'Backward',
+				},
+			});
 		}
 	}
 }

package/src/organisms/video-guide/VideoGuideSubtitles.js

@@ -1,5 +1,6 @@
 export default class VideoGuideSubtitles {
 	constructor(element, video) {
+		this.dataLayer = window.dataLayer || [];
 		this.element = element;
 		this.video = video;
 		this.subtitlesBtn = element.querySelector('.js-subtitles-btn');
@@ -39,5 +40,16 @@ export default class VideoGuideSubtitles {
 	toggleSubtitles = () => {
 		this.subtitlesBtn.classList.toggle('is-active');
 		this.subtitlesContainer.classList.toggle('is-visible');
+
+		this.dataLayer.push({
+			event: 'guided_tour',
+			eventInfo: {
+				category: 'guided_tour',
+				action: 'player_click',
+				label: 'Subtitles',
+			},
+		});
+
+		console.log(this.dataLayer);
 	};
 }