Merge pull request #2180 from segmentio/develop

Release 21.47.1

Author: markzegarelli

js/code-copy/index.js

@@ -0,0 +1,70 @@
+import tippy from 'tippy.js'
+
+export default function () {
+
+  // get the list of all highlight code blocks
+  const highlights = document.querySelectorAll("div.highlighter-rouge")
+
+
+
+
+  highlights.forEach(div => {
+    // create the copy button
+    const copy = document.createElement("button")
+    copy.innerHTML = "<img src='/docs/images/duplicate.svg' />"
+    // add the event listener to each click
+    copy.addEventListener("click", handleCopyClick)
+    // append the copy button to each code block
+    div.append(copy)
+    
+  })
+
+
+
+
+
+  const copyToClipboard = str => {
+    const el = document.createElement("textarea") // Create a <textarea> element
+    el.value = str // Set its value to the string that you want copied
+    el.setAttribute("readonly", "") // Make it readonly to be tamper-proof
+    el.style.position = "absolute"
+    el.style.left = "-9999px" // Move outside the screen to make it invisible
+    document.body.appendChild(el) // Append the <textarea> element to the HTML document
+    const selected =
+      document.getSelection().rangeCount > 0 // Check if there is any content selected previously
+      ?
+      document.getSelection().getRangeAt(0) // Store selection if found
+      :
+      false // Mark as false to know no selection existed before
+    el.select() // Select the <textarea> content
+    document.execCommand("copy") // Copy - only works as a result of a user action (e.g. click events)
+    document.body.removeChild(el) // Remove the <textarea> element
+    if (selected) {
+      // If a selection existed before copying
+      document.getSelection().removeAllRanges() // Unselect everything on the HTML document
+      document.getSelection().addRange(selected) // Restore the original selection
+    }
+  }
+
+
+
+  function handleCopyClick(evt) {
+    // get the children of the parent element
+    const {
+      children
+    } = evt.target.parentElement.parentElement
+    // grab the first element (we append the copy button on afterwards, so the first will be the code element)
+    // destructure the innerText from the code block
+    const {
+      innerText
+    } = Array.from(children)[0]
+    // copy all of the code to the clipboard
+    copyToClipboard(innerText)
+    // alert to show it worked, but you can put any kind of tooltip/popup to notify it worked
+    const alert = children[1]
+    alert.classList.add("green")
+    setTimeout(() => {
+      alert.classList.remove("green")
+    }, 700)
+  }
+}

js/index.js

@@ -22,6 +22,7 @@ import glightbox from './glightbox'
 import autocomplete from './algolia'
 import mapTable from './map-table'
 import expando from './expando'
+import codeCopy from './code-copy'
 feedback()
 accordion()
 accordionGroup()
@@ -44,4 +45,5 @@ tracking()
 searchBar()
 glightbox()
 mapTable()
-expando()
+expando()
+codeCopy()

src/_includes/content/snippet-helper.md

@@ -1,6 +1,6 @@
 {% codeexample %}
 {% codeexampletab Minified %}
-```js
+```html
 <script>
   !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="4.15.2";
   analytics.load("YOUR_WRITE_KEY");

src/_includes/menu/menu-strat.html

@@ -1,19 +1,20 @@
 {% assign sectionSlug = page.strat %}
 {% assign ourSection = site.data.sidenav.strat.sections | where: "slug", sectionSlug %}
+{% assign type = page.url | split: "/" %}
 
 <div class="sidebar sidebar--sticky sidebar--scroll sidebar--dark">
   <div class="sidebar__content">
     <nav class="menu">
       <ul class="menu__list list list--unstyle">
         <li class="menu-item">
-          <a href="{{ site.baseurl }}/connections/destinations/catalog/" class="menu-item__link menu-item__link--small menu-item__link--back">
+          <a href="{{ site.baseurl }}/connections/{{ type[2] }}/catalog/" class="menu-item__link menu-item__link--small menu-item__link--back">
             {% include icons/symbols/arrow-left.svg %}
             <span>Back to Connections</span>
           </a>
         </li>
       </ul>
     </nav>
-  
+
     <nav class="menu menu--compact">
       <ul class="menu__list list list--unstyle">
         {% for item in ourSection %}
@@ -22,22 +23,22 @@
               <span class="flex__column">
                 {{ item.section_title }}
               </span>
-  
+
               <div class="menu-item__chevron flex__column flex__column--shrink">
                 {% include icons/symbols/caret-down.svg %}
               </div>
             </button>
-  
+
             <ul class="menu-item__body" data-ref="accordion[body]">
               {% for subsection in item.section %}
                 {% if subsection.path %}
                   {% assign menuLink = site.baseurl | append: subsection.path | append: "/" %}
-  
+
                   {% if subsection.path contains "http://" or  subsection.path contains "https://"%}
                     {% assign menuLink = subsection.path  %}
                   {% endif %}
                 {% endif %}
-  
+
                 <li class="menu-item menu-item--compact">
                   <a href="{{ menuLink }}" class="menu-item__link">
                     {{ subsection.title }}

src/_sass/components/_markdown.scss

@@ -146,6 +146,7 @@
       }
       div.highlighter-rouge {
         margin: 15px auto;
+        position: relative;
       }
       table {
         margin: 15px auto;
@@ -378,4 +379,43 @@ tr.show {
     max-height: 100%;
     transition: max-height .5s ease-in-out;
   }
+
 }
+
+div.highlighter-rouge {
+  position: relative;
+
+  button {
+    color: #adb5bd;
+    box-sizing: border-box;
+    transition: 0.2s ease-out;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 10px;
+    font-size: 0.8em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 0 0.15rem;
+    width: 40px;
+    img {
+      width: 16px;
+      margin: 0;
+      border: none;
+      border-radius: 0px;
+    }
+    img:hover {
+      filter: invert(65%) sepia(9%) saturate(784%) hue-rotate(192deg) brightness(91%) contrast(87%);
+      transition: 0.2s ease-out;
+    }
+
+    img:active {
+      filter: invert(65%) sepia(9%) saturate(784%) hue-rotate(192deg) brightness(91%) contrast(87%);
+    }
+  }
+
+  .green{
+    background-color: #BAE5D5;
+    content: "copied!";
+  }
+}

src/connections/destinations/catalog/actions-fullstory/index.md

@@ -14,6 +14,11 @@ hide-dossier: true
 > success ""
 > **Good to know**: This page is about the [Actions-framework](/docs/connections/destinations/actions/) FullStory Segment destination. There's also a page about the [non-Actions FullStory destination](/docs/connections/destinations/catalog/fullstory/). Both of these destinations receives data from Segment. 
 
+## Benefits of FullStory (Actions) vs FullStory Classic
+
+- Greater control over the page properties you send.
+- Send events specific to individual pages.
+- Select by name the specific to send.
 
 
 ## Getting started

src/connections/destinations/catalog/adobe-analytics/heartbeat.md

@@ -97,7 +97,7 @@ options:@{
 
 ## Supported Video Events
 
-Adobe Analytics supports many - but not all - of the [Segment video spec events](/docs/connections/spec/video/), however **some events required for Adobe Analytics are not included as part of Segment's standard video tracking**, so read the documentation closely. The list below shows supported events and the corresponding Adobe method(s) they trigger. The next section explains the function of each event in more detail, and lists any required properties.
+Adobe Analytics supports many - but not all - of the [Segment Video Spec events](/docs/connections/spec/video/), however **some events required for Adobe Analytics are not included as part of Segment's standard video tracking**, so read the documentation closely. The list below shows supported events and the corresponding Adobe method(s) they trigger. The next section explains the function of each event in more detail, and lists any required properties.
 
 <table>
   <tr>
@@ -174,9 +174,11 @@ Adobe Analytics supports many - but not all - of the [Segment video spec events]
   </tr>
 </table>
 
+On web, multiple video sessions can be open at once so video events must have a `session_id` property unique to the session the content belongs to. If a `session_id` is not included, Segment will send `default` as the [s:event:sid](https://experienceleague.adobe.com/docs/media-analytics/using/sdk-implement/validation/heartbeat-params.html?lang=en) and Adobe will create a new session. For more information on `session_id`, please visit [Segment's Video Spec](/docs/connections/spec/video/#playback).
+
 ### Video Playback Started
 
-"Video Playback Started" is required to begin a new video session. This event **must** include the appropriate properties and options to configure the `MediaHeartbeat` instance for this video session. Although all the properties and options listed below are also **required**, you can also send additional standard and custom video properties with this event. See the [Custom Video Metadata section below.](#custom-video-metadata)
+"Video Playback Started" is required to begin a new video session. This event **must** include the appropriate properties and options to configure the `MediaHeartbeat` instance for this video session. Although all the properties and options listed below are also **required**, you can also send additional standard and custom video properties with this event. See the [Custom Video Metadata section below](#custom-video-metadata).
 
 <table>
   <tr>
@@ -193,19 +195,23 @@ Adobe Analytics supports many - but not all - of the [Segment video spec events]
   </tr>
   <tr>
     <td>`properties.title`</td>
-    <td>The title of the video session.</td>
+    <td>The title of the video.</td>
   </tr>
   <tr>
     <td>`properties.contentAssetId`</td>
-    <td>The unique id for the video session.</td>
+    <td>The unique id for the video.</td>
   </tr>
   <tr>
     <td>`properties.totalLength`</td>
-    <td>The total length in seconds of the video session.</td>
+    <td>The total length in seconds of the video.</td>
   </tr>
   <tr>
     <td>`properties.livestream`</td>
-    <td>Whether the session is a livestream (boolean).</td>
+    <td>Whether the video is a livestream (boolean).</td>
+  </tr>
+  <tr>
+    <td>`properties.session_id`</td>
+    <td>The unique id for the session. Required for web.</td>
   </tr>
   <tr>
     <td>`options.ovp`</td>
@@ -215,7 +221,7 @@ Adobe Analytics supports many - but not all - of the [Segment video spec events]
 
 ### Video Playback Completed
 
-This Segment event triggers an Adobe `trackSessionEnd()` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackSessionEnd()` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Content Started
 
@@ -242,35 +248,39 @@ This Segment event triggers an Adobe `trackSessionEnd()` event. You do not need
     <td>`properties.startTime`</td>
     <td>The position of the video playhead in seconds when the chapter starts playing.</td>
   </tr>
+  <tr>
+    <td>`properties.session_id`</td>
+    <td>The unique id for the session. Required for web.</td>
+  </tr>
 </table>
 
 ### Video Content Completed
 
-This Segment event triggers an Adobe `trackEvent(chapterComplete)` event and a `trackComplete()` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(chapterComplete)` event and a `trackComplete()` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Paused
 
-This Segment event triggers an Adobe `trackPause()` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackPause()` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Resumed
 
-This Segment event triggers an Adobe `trackPlay()` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackPlay()` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Buffer Started
 
-This Segment event triggers an Adobe `trackEvent(bufferStart)` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(bufferStart)` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Buffer Completed
 
-This Segment event triggers an Adobe `trackEvent(bufferComplete)` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(bufferComplete)` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Seek Started
 
-This Segment event triggers an Adobe `trackEvent(seekStart)` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(seekStart)` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Playback Seek Completed
 
-This Segment event triggers an Adobe `trackEvent(seekComplete)` event. To reconcile the new playhead position, you **must** pass this value as `seekPosition`.
+This Segment event triggers an Adobe `trackEvent(seekComplete)` event. On web, you must include a `session_id` property to tie this event to the correct video session. To reconcile the new playhead position, you **must** also pass the position as `seekPosition`.
 
 <table>
   <tr>
@@ -304,11 +314,15 @@ This Segment event triggers an Adobe `trackEvent(adBreakStart)` event. This even
   <td>`properties.startTime`</td>
   <td>The position of the video playhead in seconds when the chapter starts playing.</td>
 </tr>
+<tr>
+  <td>`properties.session_id`</td>
+  <td>The unique id for the session. Required for web.</td>
+</tr>
 </table>
 
 ### Video Ad Break Completed
 
-This Segment event triggers an Adobe `trackEvent(adBreakComplete)` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(adBreakComplete)` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Ad Started
 
@@ -335,11 +349,15 @@ This Segment event triggers an Adobe `trackEvent(adStart)` event. This event **m
     <td>`properties.totalLength`</td>
     <td>The total length of the ad in seconds.</td>
   </tr>
+  <tr>
+    <td>`properties.session_id`</td>
+    <td>The unique id for the session. Required for web.</td>
+  </tr>
 </table>
 
 #### Video Ad Completed
 
-This Segment event triggers an Adobe `trackEvent(adComplete)` event. You do not need to pass any properties along with this event. Properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
+This Segment event triggers an Adobe `trackEvent(adComplete)` event. On web, you must include a `session_id` property to tie this event to the correct video session. Any other properties passed to this event are not forwarded to Adobe (but are sent to other downstream destinations that support video events).
 
 ### Video Quality Updated
 
@@ -358,6 +376,9 @@ This event is required to set quality of service information in the `MediaHeartb
   <tr>
     <td>`properties.droppedFrames`</td>
   </tr>
+  <tr>
+    <td>`properties.session_id` _Required for web. Defaults to `default` if missing._</td>
+  </tr>
 </table>
 
 ## Standard Video Metadata

src/connections/destinations/catalog/hotjar/index.md

@@ -33,6 +33,8 @@ Hotjar automatically starts tracking visitors based on the tools you have enable
 
 The Hotjar destination will automatically ingest a User ID, as well as values sent over your Identify spec as [traits](/docs/connections/spec/identify/#traits), as long as [User Attributes are enabled in Hotjar](https://help.hotjar.com/hc/en-us/articles/360038394053-How-to-Setup-User-Attributes-in-4-Steps#step-2-review-your-privacy-requirements-and-enable-user-attributes).
 
+Identify calls that do not have a User ID value will not be sent to Hotjar.
+
 ### Nested values or lists
 
 The Hotjar Identify API is unable to ingest values passed as nested objects or lists over your `identify` Spec: