Get product id from script tag

Solved
Highlighted
New Member
2 0 0

Hi!

 

I'm developing a public app where I want to display a pop up on specific product pages.

 

To do this I inserted a script tag using the Script Tag API and want to do a call from it to my server passing the product id to check if that product should or not display the popup.

 

I need a reliable way of getting the product. I did some googling and found some answers saying that you can use the url slug getting it with window.location.pathname, but that's not always reliable. Then I was inspecting the product page and found the ShopifyAnalytics object where I can get ShopifyAnalytics.meta.page.pageType  and ShopifyAnalytics.meta.product.id. 

 

So my question is, can I rely on the ShopifyAnalytics object to always be on the product page and for all merchant stores?

 

Am going about this the right way? or is there a better approach to knowing when a customer is on a specific product page?

 

Thanks!

0 Likes
Shopify Partner
1056 117 170

ShopifyAnalytics.meta.product.id is successfully being used by many apps, though undocumented and can change in the future. The slug is a better solution, not sure why you are saying it's not that reliable, is it because the slug can change?

 

A rock solid alternative would be to add your own custom snippet into say product.liquid and expose the product id explicitly:

<script>
  var myVeryOwnProductId = '{{product.id}}';
</script>

but this implies you have to inject the code into liquid templates.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
1 Like

Success.

Shopify Staff
Shopify Staff
268 36 38

Hey @jonathanjm,

 

can I rely on the ShopifyAnalytics object to always be on the product page and for all merchant stores?

No, this could change.

 

getting it with window.location.pathname, but that's not always reliable

Can you elaborate? I might be missing something but you should be able to search for `/products/` in window.location.pathname to detect a product page and find the handle.

 

There are a few ways you could approach this, each with their own trade-offs:

 

- Store handles in your database instead of IDs, but you'll need to keep these in sync (handles can change).

- Get the JSON of a product, which will reveal the ID, but an additional request on every product page is slow and can lead to other issues.

- Add some JS to the theme which passes product IDs to your app, but this requires modifying the theme.

- Use metafields to keep track of which products should display a popup. This avoids having to hit your server each time, but also requires modifying the theme.

 

The best approach will depend on how the app works.

1 Like
New Member
2 0 0

@Visely-Team

@scottydont 

Thanks!

 

I'm trying to avoid having the user inject code. I'll go with the slug approach and get the product JSON.

0 Likes