<aside> 💡 This article will outline the steps to integrate Gander on your Custom Site

</aside>

1. Paste Snippet #1

In order to attach gander videos to your page there are two options - using google tag manager or pasting a snippet directly to your codebase

Option 1: Setup with Google Tag Manager

We recommend this option because google tag manager offers version control and safe guards that prevent you from accidentally editing the code

This document describes the steps required to add gander player to your webpage. The following document assumes you already have Google Tag Manager added to your site, but if not you can follow these steps.

1. Login to google tag manager

2. Click on the tags and create a new one

   

3. Create a new tag called Gander

   • Tag type: Please select "Custom HTML" as the option for tag type
   • Triggering: Please select "Window Loaded" as the trigger
   • Please paste the following snippet to your google tag manager:

<!-- Gander snippet by google tag starts ends -->
<link href="<https://widget.gogander.online/static/css/index.css>" rel="stylesheet" />
<script src="<https://widget.gogander.online/static/js/index.js>"></script>
<!-- Gander snippet by google tag manager ends -->

Once you have published the google tag manager snippet, please link videos to pages using our app to render videos. For more information on how, please click HERE

Option 2: Paste Snippet directly into your Code Base

Alternatively, you can also paste the snippet below to your main layout file (any file which loads for every page load)

<link href="<https://widget.gogander.online/static/css/index.css>" rel="stylesheet" />
<script>
window.addEventListener('load', (event) => {
   const script = document.createElement('script');
   script.src = '<https://widget.gogander.online/static/js/index.js>';
   script.defer = true;
   document.body.appendChild(script);
});
</script>

2. Paste Snippet #2 (to render Embedded videos)

• For the embed experience, the snippet of code above has to be pasted on your product page’s code. In order to render this experience, you must complete step 1 - that is paste the index.css & index.js via option1 or option 2

<aside> 💡 What is an embed experience ? When the gander video is within the page (as opposed to overlay), we call the experience embed. Below is an example of embedded vides.

</aside>