Introduction

It is important to follow the best practices outlined in this article in order to provide the best experience for your end users. By using the latest version of the LaunchNotes embed and implementing lazy loading techniques, you can improve the accuracy of your embed analytics and provide a smoother experience for your users.

Using the latest version

We make frequent, important updates to our embed. By pinning your version to latest, you can ensure that your embed will have the latest features, fixes, and improvements. These updates may also include important security patches and performance improvements.

Updating npm package

If you are using our npm package, you can use the ^ syntax to point to compatible versions.

{
  "name": "@launchnotes/example-app",
  "version": "1.0.0",
  "dependencies": {
    "@launchnotes/embed": "^1.0.0",
  }
}

You can also do npm update @launchnotes/embed to update the embed version to the latest.

Script tag

If you’re using the script tag, make sure your src has latest in the path.

<script type="module" async="" src="https://embed.launchnotes.io/latest/dist/esm/launchnotes-embed.js" />
<script nomodule="" async="" src="https://embed.launchnotes.io/latest/dist/esm/launchnotes-embed.js" />

Dependabot

You can also use the dependabot integration to automatically update the LaunchNotes embed. GitHub and GitLab provide great integrations to automatically and seamlessly update dependencies:

Lazy loading

Lazy loading is a technique used to defer the loading of non-critical resources until they are needed. This could improve the performance of your application and more accurately measure embed usage.

Using React lazy

You can use React’s lazy API to defer components. First put the LaunchNotes embed into a React component. Then, using the lazy API, load it in the place you want to render it. For best practice, you can use useState to manage the rendering of the embed.

# LaunchNotesEmbed.jsx
export default LaunchNotesEmbed() {
  return <launchnotes-embed />
}

# HomePage.jsx

import { lazy, Suspense, useState } from 'react'
const LaunchNotesEmbed = lazy(() => import ('./LaunchNotesEmbed')

const HomePage = () => {
const [show, setShow] = useState(false)
return (
    <>
      <label>
        <input value={show} onChange={e => setShow(e.target.value)} />
        Show embed
      </label>
      { showEmbed && <LaunchNotesEmbed /> }
    </>
  )
}

export default HomePage

Vanilla JavaScript

If you are using vanilla JavaScript, you can use the interaction observer API to lazy load elements. You can achieve this by setting the display style wrapping the embed to none to start. Then, use the InteractionObserver to remove the display tag.

Here is an example that removes the display style on button click:

<script lang="js">
  let button = document.querySelector('button#show-button')
  let lazyEmbedClass = 'lazy-embed'

  button.onclick = function () {
    let lazyEmbeds = [].slice.call(document.querySelectorAll(`div.${lazyEmbedClass}`))
  
    if ('InteractionObserver' in window) {
      let lazyEmbedObserver = new InteractionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (!entry.isIntersecting) return
          let lazyEmbed = entry.target;
          lazyEmbed.style.removeProperty('display')
          lazyEmbed.classList.remove(lazyEmbedClass)
          lazyEmbedObserver.unobserve(lazyEmbed)
      })
    }
  }
</script>
<body>
  <button type="button" id="show-button">Show embed</button>
  <div class="lazy-embed" style="display:none;"></div>
</body>

If the display method does not work, you can also try creating the embed element in JavaScript using innerHTML.


<script lang="js">
  let button = document.querySelector('button#show-button')
  let lazyEmbedClass = 'lazy-embed'

  button.onclick = function () {
    if (!'InteractionObserver' in window) return
    let lazyEmbeds = [].slice.call(document.querySelectorAll(`div.${lazyEmbedClass}`))

    let lazyEmbedObserver = new InteractionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (!entry.isIntersecting) return
        let lazyEmbed = entry.target;
        lazyEmbed.innerHTML = "<launchnotes-embed ... ></launchnotes-embed>"
        lazyEmbed.classList.remove(lazyEmbedClass)
        lazyEmbedObserver.unobserve(lazyEmbed)
    })
  }
</script>
<body>
  <button type="button" id="show-button">Show embed</button>
  <div class="lazy-embed" style="display:none;"></div>
</body>

A simple React Example can be found here: https://codesandbox.io/s/launchnotes-embed-example-54x5g2?file=/src/App.js