⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Adding third-party scripts

In this guide, learn how to add third-party scripts to FastStore projects.

Third-party scripts are elements embedded in a webpage but served from a different domain than the one the user visits. Examples of these scripts include social media buttons, video players, ads, analytics tools, and other elements contributing to a more dynamic and interactive web experience.

Before you begin

Choose essential third-party scripts

To maintain your website's performance without compromising the functionality offered by third-party scripts, consider incorporating only those third-party scripts that enhance the value of your website.

Update the @faststore/core version

Ensure your project uses @faststore/core version 2.1.82 or above. If not, follow these steps:

  1. Open the FastStore code project.
  2. Navigate to the package.json file.
  3. Find the @faststore/core package and change its version to 2.1.82.
  4. In your terminal, run yarn install to update the package in the project.

Verify compatibility with Partytown

FastStore uses Partytown (opens in a new tab) for script execution. Not all third-party scripts may be compatible with Partytown, so we strongly recommend testing third-party scripts with Partytown before implementing them. If any issues occur, avoid using those particular scripts.

Step by step

  1. In your FastStore project, navigate to the src folder and create a folder named scripts.

  2. Within the src/scripts folder, create the ThirdPartyScripts.tsx file.

  3. In the ThirdPartyScripts.tsx file, add your script as the example below:

src/scripts/ThirdPartyScripts.tsx
const ThirdPartyScripts = () => {
  return (
    <script
      type="text/partytown"
      dangerouslySetInnerHTML={{
        // Add your script here and remove the console.log example
        __html: "console.log('🚀 Hello from a third-party script!')",
      }}
    />
  )
}
 
export default ThirdPartyScripts

  1. Run yarn dev in the terminal to start the development server and execute the script you have added.

  2. Access the provided localhost URL in your browser, open the Developer Tools, and go to the Console tab. You should be able to see the message: 🚀Hello from a third-party script!:

third-party-script-example

Tracing the Error Source