From 86c2340466925ace7c0baa2af63264dcdc203669 Mon Sep 17 00:00:00 2001 From: Mark Biesheuvel Date: Tue, 5 Nov 2024 14:15:22 +0100 Subject: [PATCH] Add YouTube extension --- .../Editor Extensions/YouTube Video/README.md | 41 +++++++++++ .../YouTube Video/config.json | 68 +++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 Extensions/Editor Extensions/YouTube Video/README.md create mode 100644 Extensions/Editor Extensions/YouTube Video/config.json diff --git a/Extensions/Editor Extensions/YouTube Video/README.md b/Extensions/Editor Extensions/YouTube Video/README.md new file mode 100644 index 0000000..86edb64 --- /dev/null +++ b/Extensions/Editor Extensions/YouTube Video/README.md @@ -0,0 +1,41 @@ +# YouTube Video with built-in event tracking + +## Description + +Adds a YouTube video to your website using the YouTube IFrame API. + +You can create this extension using the JSON from the file here: [`config.json`](./config.json) + +More information on extensions is available here: https://support.optimizely.com/hc/en-us/articles/4410289006861-Use-Extensions + +## Fields + +When adding this extension to a variation, you will need to configure the following values. + +| Field Name | Description | +| --------------- | ----------- | +| Video Placement | Similar to the "HTML Placement" fields in the "Insert HTML" change type. +| Video ID | YouTube video ID. This can be found in the video URL +| Width | Desired width. +| Height | Desired height. + +## Custom events + +This extension will automatically track the following events. Note that you will still need to create these custom events if you haven't do so already. The API name needs to match exactly, but the (regular) name can be anything. + +| API Name | Description | +| --------------- | ----------- | +| `youtube_ready` | YouTube player has successfully loaded. +| `youtube_play` | Visitor pressed play. +| `youtube_pause` | Visitor pressed pause. +| `youtube_end` | Video reached the end. + +All events will include the following built-in event properties. + +| Property Name | Description | +| --------------- | ----------- | +| `SKU` | Video ID | +| `Text` | Video Title | + +More information on custom events and event properties is available here: +https://support.optimizely.com/hc/en-us/articles/4410288960909-Custom-events diff --git a/Extensions/Editor Extensions/YouTube Video/config.json b/Extensions/Editor Extensions/YouTube Video/config.json new file mode 100644 index 0000000..a4f37c2 --- /dev/null +++ b/Extensions/Editor Extensions/YouTube Video/config.json @@ -0,0 +1,68 @@ +{ + "plugin_type": "widget", + "name": "YouTube Video", + "edit_page_url": "https://web.optimizely.demo.training/", + "form_schema": [ + { + "name": "selector", + "options": null, + "label": "Video Placement - Selector", + "default_value": "body", + "field_type": "selector" + }, + { + "name": "position", + "options": { + "choices": [ + { + "value": "beforebegin", + "label": "Before" + }, + { + "value": "afterend", + "label": "After" + }, + { + "value": "afterbegin", + "label": "At the beginning of" + }, + { + "value": "beforeend", + "label": "At the end of" + } + ] + }, + "label": "Video Placement - Position", + "default_value": "afterbegin", + "field_type": "dropdown" + }, + { + "name": "videoId", + "options": null, + "label": "Video ID", + "default_value": "hHXEjcJkcbc", + "field_type": "text" + }, + { + "name": "width", + "options": null, + "label": "Width", + "default_value": 560, + "field_type": "number" + }, + { + "name": "height", + "options": null, + "label": "Height", + "default_value": 315, + "field_type": "number" + } + ], + "description": "Adds a YouTube video to the website and tracks custom events for ready, play, pause, and end.", + "options": { + "html": "
", + "css": "", + "apply_js": "// Local helper function to send Optimizely custom event with event properties\nconst sendEvent = (eventName, youTubeEvent) => {\n window.optimizely.push({\n type: 'event',\n eventName,\n properties: {\n SKU: extension.videoId,\n Text: youTubeEvent.target.videoTitle\n }\n });\n};\n\n// Local helper function to initialize YouTube player\nconst initializePlayer = () => {\n const player = new window.YT.Player(`optimizely-extension-${extension.$instance}`, {\n height: extension.height,\n width: extension.width,\n videoId: extension.videoId,\n playerVars: {\n playsinline: 1\n },\n events: {\n onReady: (event) => {\n // YouTube player has succesfully loaded\n sendEvent('youtube_ready', event);\n },\n onStateChange: (event) => {\n switch(event.data) {\n case YT.PlayerState.PLAYING:\n // Pressed play\n sendEvent('youtube_play', event);\n break;\n case YT.PlayerState.PAUSED:\n // Pressed pause\n sendEvent('youtube_pause', event);\n break;\n case YT.PlayerState.ENDED:\n // Video ended\n sendEvent('youtube_end', event);\n break;\n default:\n // No-op\n }\n }\n }\n });\n};\n\n// Get Optimizely Utilities library\nconst utils = window.optimizely.get('utils');\n\n// Wait for the selected video placement to appear in the DOM\nutils.waitForElement(extension.selector).then((elem) => {\n \n // Insert HTML template\n\telem.insertAdjacentHTML(extension.position, extension.$html);\n \n // Check whether the YouTube IFrame API has already loaded\n if (window.YT) {\n // Initialize YouTube player - Immediately\n initializePlayer();\n } else {\n // Define global callback function for YouTube IFrame API\n window.onYouTubeIframeAPIReady = () => {\n // Initialize YouTube player - When ready\n initializePlayer();\n };\n \n // Insert YouTube IFrame API script\n \tconst scriptTag = document.createElement('script');\n scriptTag.src = \"https://www.youtube.com/iframe_api\";\n \tdocument.getElementsByTagName('head')[0].append(scriptTag);\n }\n});\n", + "undo_js": "// Find and remove HTML template\nconst elem = document.getElementById(`optimizely-extension-${extension.$instance}`);\nif (elem) {\n\telem.parentElement.removeChild(elem);\n}\n" + } + } \ No newline at end of file