{% extends "base.html" %}

{% block extrahead %}
<meta name="ahrefs-site-verification" content="b13556bca44be7ae858f67ddbdd71eaa177d9389a88eb295244299a87292d60a">
{% endblock %}

{% block htmltitle %}

{% if page.meta and page.meta.title %}
<title>{{ page.meta.title }} | {{ config.site_name }} </title>
{% elif page.title and not page.is_homepage %}
<title>{{ page.title | striptags }} | {{ config.site_name }}  </title>
{% else %}
<title>{{ config.site_name }}</title>
{% endif %}

{% endblock %}

{% block libs %}

<!-- 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-K86VCV3');</script>
	<!-- End Google Tag Manager -->


<!-- Plausible analytics -->
<!--
https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-extensions
 -->

<script defer {% if page.meta and page.meta.contentType %}event-content_type="{{ page.meta.contentType }}"{% endif %} data-domain="docs.n8n.io" src="https://plausible.io/js/script.file-downloads.outbound-links.pageview-props.tagged-events.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>




<!-- n8n Workflow Preview Service -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>


{% endblock %}


{% block container %}

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K86VCV3"
	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

{{ super() }}

{% endblock %}


{% block scripts %}
  <!-- Add scripts that need to run before here -->
	<script>
	//Initialize the Kapa object
	(function () {
	let k = window.Kapa;
	if (!k) {
		let i = function () {
			i.c(arguments);
		};
		i.q = [];
		i.c = function (args) {
			i.q.push(args);
		};
		window.Kapa = i;
	}
	})();
	</script>

  {{ super() }}
  <!-- Add scripts that need to run afterwards here -->
  <script>
	// Track video plays with Plausible
	if (document.readyState === 'loading') { 
  		document.addEventListener('DOMContentLoaded', trackVideoWithPlausible);
	} else { 
		trackVideoWithPlausible();
	}

	// used for tracking time played even when multiple videos on page
	var videoTrackingObj = {};


	function trackVideoWithPlausible() {
	  // If Plausible does not exist, stop
	  if (typeof plausible !== "function") {
		return;
	  }
	  // If there are no videos on page, stop
	  const videos = document.querySelectorAll("video");
	  if (videos.length === 0) {
		return;
	  }
	  // Add event listeners
	  videos.forEach((video) => {	
		// for <video src="">
		if (video.src) {	
        videoTrackingObj[new URL(video.src).pathname] =  {
			"played": false,
		    "played25": false,
		    "played50": false,
	        "played75": false
		  }
		} else if (video.getElementsByTagName('source').length > 0) {
			videoTrackingObj[new URL(video.getElementsByTagName('source')[0].src).pathname] =  {
			"played": false,
		    "played25": false,
		    "played50": false,
	        "played75": false
		  }
		} else {
			let currentPage = window.location.href;
			fetch('https://internal.users.n8n.cloud/webhook/docs-video-not-tracking?docsPage='+currentPage);
		}
		
		video.addEventListener("play", trackVideoPlayWithPlausible);
		video.addEventListener("timeupdate", trackTimeIntervalsWithPlausible);
		video.addEventListener("ended", trackVideoEndedWithPlausible);
	  });
	}

	function trackVideoPlayWithPlausible(event) {
	  let pagePath = new URL(event.target.baseURI).pathname;
	  let videoPath = new URL(event.target.currentSrc).pathname;
	  // Only register the first play event
	  if (videoTrackingObj[videoPath].played === true) {
		return;
	  }
	  // Track play
	  plausible("Video: Play", { props: { page: pagePath, video: videoPath } });
	  videoTrackingObj[videoPath].played === true;
	}

	function trackTimeIntervalsWithPlausible(event) {
	  let pagePath = new URL(event.target.baseURI).pathname;
	  let videoPath = new URL(event.target.currentSrc).pathname;
	  // If less than 25% played, do nothing
	  if (event.target.currentTime < (event.target.duration / 4)) {
		return;
	  }
	  if (event.target.currentTime > (event.target.duration / 4) && event.target.currentTime < (event.target.duration / 2) && videoTrackingObj[videoPath].played25 === false) {
	    plausible("Video: 25% Played", { props: { page: pagePath, video: videoPath } });
		videoTrackingObj[videoPath].played25 = true;
	  }
	  if (event.target.currentTime > (event.target.duration / 2) && event.target.currentTime < ((event.target.duration / 4) * 3) && videoTrackingObj[videoPath].played50 === false) {
	    plausible("Video: 50% Played", { props: { page: pagePath, video: videoPath } });
		videoTrackingObj[videoPath].played50 = true;
	  }
	  if (event.target.currentTime > ((event.target.duration / 4) * 3) && videoTrackingObj[videoPath].played75 === false) {
	    plausible("Video: 75% Played", { props: { page: pagePath, video: videoPath } });
		videoTrackingObj[videoPath].played75 = true;
	  }

	}

	function trackVideoEndedWithPlausible(event) {
	  let pagePath = new URL(event.target.baseURI).pathname;
	  let videoPath = new URL(event.target.currentSrc).pathname;
	  // Track video reached end
	  plausible("Video: Ended", { props: { page: pagePath, video: videoPath } });
	}
  </script>

  <!---->
{% endblock %}


{% block content %}
{{ super() }}
{% with inContent=true %}
	{% include "partials/kapaButton.html" %}
{% endwith %}
{% include "partials/n8nFeedback.html" %}
{% endblock %}