Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

How to integrate Web Pixel extensions in Rails app

How to integrate Web Pixel extensions in Rails app

twnsnd
Shopify Partner
3 0 0

I have a Ruby on Rails-based Shopify App (based on the official Rails engine provided by Shopify) and I'm looking to enhance it's functionality by collecting additional data within the Rails app via a Shopify Web Pixel.

 

I can't find any documentation on how to upload the JavaScript for the Web Pixel from Ruby/Rails. The docs say to use the Shopify CLI but this seems to assume the whole Shopify app is built in Nodejs rather than Rails – is there a way to standalone upload the Web Pixel from Rails?

 

I can see the CLI uses an "ExtensionCreate" API – but can't see this documented anywhere as to what the inputs are, so I could replicate it in Ruby.

Replies 3 (3)

jordanholmes
Shopify Partner
152 28 34

Hello,

 

You should use the @Shopify/cli and @Shopify/app npm packages

 

Extensions can be pushed to a Shopify app using the CLI commands e.g 

 

yarn shopify app deploy

 

You will need to follow the instructions to add a config file to your codebase. 

 

You can put the extensions in the rails app folder but they are not directly connected to the rails app itself.

 

You can think of it like the extension and the rails app are both connected to same Shopify app but they are completely separate things

 

I build rails apps with Shopify extensions and it works fine

Jordan Holmes
Shopify Expert and Ruby on Rails Developer
Shopify Partner Directory
twnsnd
Shopify Partner
3 0 0

Thanks for the reply Jordan. I hadn't tried that command, the docs I was following didn't mention it – and it worked with one exception: after creating the extension, it fails on creating a new version.

 

I'm not sure why it bundles a UI extension when it's just a web pixel, here's the output of the `yarn shopify app deploy` command:

 

? Release a new version of [app-name]?
✔ Yes, release this new version

✔ Created extension [web-pixel-extension-name].

Releasing a new app version as part of [app-name]

[web-pixel-extension-name]. │ Bundling UI extension [web-pixel-extension-name]....
[web-pixel-extension-name]. │ [web-pixel-extension-name]. successfully built


╭─ error ────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Version couldn't be created. │
│ │
│ [web-pixel-extension-name] │
│ │
│ Validation errors │
│ • Missing expected key(s). │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────────╯

 

It doesn't give any clarity on what key is missing from where.

 

FWIW, my `shopify.extension.toml` file just contains:

 

type = "web_pixel_extension"
name = "[web-pixel-extension-name]"
runtime_context = "strict"

 

Any my `shopify.app.toml` includes:

 

name = "[app-name]"
client_id = "[redacted]"
application_url = "[redacted]"
embedded = true

[access_scopes]
scopes = "write_pixels,read_customer_events"
use_legacy_install_flow = true

[webhooks]
api_version = "2023-10"

[app_proxy]
url = "[redacted]"
subpath = "[redacted]"
prefix = "apps"

[pos]
embedded = false

 

If you have any clues from your own setup, that would be appreciated @jordanholmes!

SponsorlessTeam
Shopify Partner
2 0 0

@twnsnd I'm trying to do the same thing here.  I have a new Rails app from the Shopify rails engine (https://github.com/Shopify/shopify_app) and I'm trying to add an extension to it.  When I'm in the rails root directory and I try to create an extension with:

 

yarn shopify app generate extension --template web_pixel --name web-pixel-name

 

I get the following error:

 

yarn run v1.22.21
error Couldn't find a package.json file in "[redacted]"

 

 

Is the extension supposed to be a separate codebase from the rails app?  Any insight you could provide me as to how you managed to do this? (Assuming you have figured this out since your comment)