Correct way to add custom Javascript needing Liquid variables as App to Shopify

Question

our service adds customer level analytics and I am trying to create a shopify app. We have a domain api key available for each customer which we need to initiate in the JS API. Email address is needed to add contact-level analytics. I see that email address is available as a liquid variable - customer.email

What's the correct way to add the js file? We have tried the following approaches

1) Add ScriptTag - using the API, I was able to add the script tag successfully. I was able to pass api_key as param but I cannot add liquid variable to the script tag. Can I?

2) The only sane way is to create api.js.liquid as an asset and add to each theme. However, I am not sure on how to add it to a theme to actually call it

How do I add this to theme in the header using API?

{{ 'api.js' | asset_url | script_tag }}

The user wouldn't know where to add this and my app may not be used in a desired way.

3) is there a better approach to load custom javascript requiring liquid variables?

Thanks.

Answer 1

This is in fact possible, but it's tricky and application specific. The basic idea is you want to setup both a ScriptTag and ApplicationProxy:
• the ApplicationProxy uses liquid to output the variables you need
• the ScriptTag loads the ApplicationProxy via Ajax and then extracts the variables back out into JS