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:

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

Verify compatibility with Partytown

FastStore uses Partytown 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.

Instructions

In your FastStore project, navigate to the src folder and create a folder named scripts.
Within the src/scripts folder, create the ThirdPartyScripts.tsx file.
In the ThirdPartyScripts.tsx file, add your script as the example below:

src/scripts/ThirdPartyScripts.tsx
_13const ThirdPartyScripts = () => { _13 return ( _13 <script _13 type="text/partytown" _13 dangerouslySetInnerHTML={{ _13 // Add your script here and remove the console.log example _13 __html: "console.log('🚀 Hello from a third-party script!')", _13 }} _13 /> _13 ) _13} _13 _13export default ThirdPartyScripts
Run yarn dev in the terminal to start the development server and execute the script you have added.
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!:

${"base64":" ","img":{"width":2828,"height":1416,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1211549,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/third-party-scripts___2f9d925975b6217a5c3872ed96fc6bd7.png"}}$

Before you begin

Choose essential third-party scripts

Update the @faststore/core version

Verify compatibility with Partytown

Instructions

Update the `@faststore/core` version