Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreProject structure
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.
There is an ongoing issue where FastStore stores are not receiving Google Tag Manager (GTM) events due to an integration conflict between FastStore and Partytown. The team is actively working on a fix.
In the meantime, please follow the workaround outlined in this Known Issue article.

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 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

  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

    _13
    const 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
    _13
    export default ThirdPartyScripts

  4. Run yarn dev in the terminal to start the development server and execute the script you have added.
  5. 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"}}
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page