I'm attempting to integrate Amazon native search ads into my React-based website. The website features dynamically changing product types, such as sailing books, sailing jackets, and swimming shorts. My goal is to display a few products from Amazon for each product type by implementing Amazon native search ads. Amazon provides two script tags for this purpose, but despite my efforts, I haven't been able to successfully render them on my application.
Although the script tags work fine when directly added to the index.html file (or on a sandbox environment), I'm encountering difficulties in getting the script tag to function properly within a React element. I'm seeking suggestions or solutions from anyone who might have encountered a similar issue or has any insights on how to resolve it.
Additionally, I've explored the option of using the product advertising API 5.0. However, it imposes a limit of one product request per second, which is not suitable for my requirements as I need to fetch products for 20 different types simultaneously.
Below are my script tags:
<script type="text/javascript">
amzn_assoc_placement = "adunit0";
amzn_assoc_search_bar = "false";
amzn_assoc_tracking_id = "noid";
amzn_assoc_ad_mode = "search";
amzn_assoc_ad_type = "smart";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_title = "Sailing Books";
amzn_assoc_default_search_phrase = "sailing books";
amzn_assoc_default_category = "All";
amzn_assoc_linkid = "2e96d3d63ba4fe9f01c60204e5abe75e";
amzn_assoc_search_bar_position = "bottom";
</script>
<script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US"></script>
I tried Helmet and dangerously set inner HTML but couldn't make it work.