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 2 (2)

jordanholmes
Shopify Expert
151 27 30

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
https://experts.shopify.com/jordan-holmes
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!