Solved

Get product id from script tag

jonathanjm
Visitor
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!

Accepted Solution (1)

SBD_
Shopify Staff
1829 269 405

This is an accepted solution.

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.

Scott | Developer Advocate @ Shopify 

View solution in original post

Replies 5 (5)

Visely-Team
Shopify Partner
1843 210 488

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
jonathanjm
Visitor
2 0 0

@Visely-Team

@SBD_ 

Thanks!

 

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

Hasimew
Tourist
6 1 1

Hello,

 Did your app finally work? is YES, what is it called?

ShopSappers
Excursionist
10 0 4

@Visely-Team adding explicit {{product.id}} via liquid output to js in product.liquid have difficulties with the introduction of Shopify theme 2.0 Because product.liquid is no more present for 2.0 themes.
Since the templates are json files you can't add any js or html to product.json template, which will result in theme break.

 

So you have to either add it in main-product.liquid section or to the theme.liquid layout of course with if product check condition.

I'm adding this reply just for any new comers who seeks for such solutions.

SBD_
Shopify Staff
1829 269 405

This is an accepted solution.

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.

Scott | Developer Advocate @ Shopify