How to Insert Javascript on all pages of shopify based on inputs provided by user

Retired Boards Appdev Store Design
1

Hi,

I am fairly new to shopify and need help in developing a remix app. I am developing an app, which based on shopowners’ input will track user clicks on pages. I have a javascript that can achieve this. How do i insert this javascript on all pages of Shopify store once the shopowner decides to install the app and configures the input? Any input/tutorials on this will be really helpful.

I have tried the following code, but on clicking submit the page gives a 200 response

export const action = async ({request})=>{

const { admin, session } = await authenticate.admin(request);

const script_tag = new admin.rest.resources.ScriptTag({session: session});

script_tag.event = “onload”;
script_tag.src=“https://myscript.js”;
const response = await script_tag.save({
update: true,
});

return null;

};

export default function Data(){
const loaderData = useLoaderData();
const actionData = useActionData();
return (

Submit
); }
2

Hi Manug120,

Will this app be a custom app, or an app that you’re submitting to the Shopify App Store? If it’s an app that you intend to submit to the app store, you will need to be mindful about how JS is beinmg added to a theme, and you’ll have to use theme app extensions and include JS within the /assets directory of the app.

Otherwise, you can use the ScriptTag resource to load the JavaScript from a remote server into a theme section at the time the section’s page is viewed. Script tags are scoped to the app that created them. When an app is uninstalled from a shop, all of the script tags that it created are also removed.

Once a merchant installs your app and provides necessary permissions, you can create a new ScriptTag resource. You can see an example of this in our docs, where you would set the event property to “onload” and src property to the URL of your JavaScript file. You’ll need to have the script_tags scope permission to create ScriptTags.

Hope this helps!

1 Like
3

Hey @Liam Thanks for the solution.
I have a question regarding the scriptTag API.

rohankokkula_0-1704382474200.png
rohankokkula_0-1704382474200.png696×209 19.3 KB

On the documentation, it says the the app might not pass the review if we use this instead of app theme extensions.
I want to run a custom dynamic script once user installs the app.
I did add some files to the assets folder but I cannot see those files in the theme code editor.