How to Deploy Your Shopify Node JS React App to Heroku

This is a work in progress so keep following this post. I’m building my Shopify Node Apps by following the instructions from Shopify found at this link – Shopify App with Node and React  the shopify node serve command starts a local development server that uses the Ngrok service to create a secure tunnel (HTTPS) between your computer and Shopify.

Here are the steps I followed on a Windows 10 computer.
Note: the commands you need to use will depend on your OS Platform
Also this is not yet a finished project so these steps are still unproven but we will get it working soon.

  • My notes along the way!
  • Installed Node JS = v14.18.1 (node -v)
  • npm = 6.14.15 (npm -v)
  • Installed via RubyInstaller for Windows with Devkit
  • Ruby Command Prompt c:> gem install shopify-cli
  • shopify version = 2.6.5 (as of this time)
  • shopify node create
  • app name = test-app24
  • Change directories to your new project folder c:\test-app24>
  • C:\test-app24>
  • C:\test-app24>shopify node serve
  • Everything tested good on development store
  • close application
  • Deployment method to Heroku in this case is GitHub
  • create a new free account on Heroku
  • create new node app called test-app24
  • login to GitHub
  • create new repository named test-app24 in GitHub
  • from terminal again in the c:\test-app24 directory
  • my commands use the SSH keys that I setup in GitHub
  • git init
  • git add .
  • git commit -m “first commit”
  • git remote add origin git@github.com:remotetech/test-app24.git
  • git push -u origin master
  • now all your app files have been pushed to GitHub repo
  • In Heroku under deploy chose connect to GitHub
  • connect test-app24
  • choose branch to deploy master
  • enable automatic deploys
  • click deploy branch
  • Connect app with your Github repo/branch (it may take a minute or two to load)
  • Place your SHOPIFY_API_KEY and SHOPIFY_API_SECRET_KEY and SCOPES in your Heroku app’s Config Vars located in Settings.
  • Update your Shopify App Urls with your live Heroku app link (https://example-app.herokuapp.com/) and (https://example-app.herokuapp.com/auth/callback)

Come back soon as we will complete this!

Regards,
James (Tech Support)
JDHL Technologies
Get Pixel Conversions API on the – Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversions API
And remember we are always here for you

Prestige Theme and the Add To Cart Pixel Event

James your tech support explains how to get the Add To Cart pixel event when using the Prestige Shopify Theme.

Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

How to Test your Facebook Conversion API Server Events and your Pixel Browser Events

Your tech support James walks you through testing All your Facebook Conversions API (server) and Browser (cookies) Events on your Shopify Store. Deduplication happens on every event between server and browser 100% but if it doesn’t then one side should fill in the gaps. 🙂

Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

Facebook Track Events Automatically Without Code On or Off

 

(click on image to enlarge)

Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

Remove Shopify Pixel and Shopify Conversions API

You need to remove your Shopify Facebook Pixel and Shopify Conversions API as they will conflict with Pixel Conversions API and result in deduplication problems and unreliable event tracking. Just a few easy steps are needed to do this task. Follow Step 1 and Step 2 in the first image below and if you still have your Facebook Pixel ID on the Preferences Page you must remove it also. See the second image below to remove your Facebook Pixel from the Preferences Page.

(click on image to enlarge)

This link is for customers that have manually installed their Facebook Pixel Code Snippet directly into their theme.liquid file. https://help.shopify.com/en/manual/promoting-marketing/analyze-marketing/facebook-pixel#change-or-remove-a-facebook-pixel-from-your-online-store


Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!

How to add your Facebook Pixel ID into the Pixel Conversions API App Dashboard

show me how – video

Hello, this is James your tech support from Pixel Conversions API – In this video, I’m going to show you exactly how to add your Facebook Pixel ID into the app Dashboard step by step.

  • The first thing you need to do is open your Pixel Conversions API App Dashboard.
  • Now locate exactly where your Pixel ID needs to be added. Look for the field that says “Enter your pixel id here”
  • Now that you know where your Pixel ID needs to go we need open your Facebook Business Manager and navigate to your Facebook Events Manager. So let’s do it.
  • Login to your Facebook Business Manager and select the More Tools button and then select your Events Manager button.
  • Then at the far top right of the screen make sure you have selected your correct Facebook Business Account.
  • On the top left of your screen Under Data Sources select the correctl pixel ID you want to use.
  • Now in the Overview tab locate your pixel id and click on it, this will automaically copy your pixel id for you.
  • Now navigate back to your app dashboard and paste your Pixel ID into the field that says “Enter your pixel id here”.
  • Now to the right of your pixel id field you can select if you want your pixel to be a Main – All Pages Pixel that triggers on every page of your store or you can select one of your Collections that will only trigger on those pages showing products from that specific collection. Tip you should always have at least one Main – All Page Pixel. In this case I’m going to make this pixel id a Main – All Pages pixel. Go ahead and make your selection.
  • Now you will need to do similar steps for your Facebook Conversions API Access Token and your Test Event Code before clicking on the Create Pixel Button. Look for my show me how videos for each of these next steps.

    There you have it. In just a few steps, you have added your Facebook Pixel ID into the app Dashboard now look for our other two show me how video’s to complete the process.

    If you don’t already have Pixel Conversions API then click on the link in this video description to install it. Also look for the links to our other show me how videos in this video description below.

    Thanks for watching this video and using Pixel Conversions API. And remember you are AWESOME and have a GREAT DAY!

 

show me how – video Conversions API Facebook – Shopify App show me how – video Pixel Conversions API – CAPI on how to get the following entered into our app dashboard.
1. Pixel ID
2. Test Event Code
3. Facebook Access Token


Regards,
James (Tech Support)
Get Pixel Conversions API on the Shopify App Store
P.S. your 5 star experience is our goal.
Thanks again from all of us here at Pixel Conversion Pro and remember, you are Awesome!