Adding Gatsby to your Order Confirmation / Post-Purchase / Thank You page is one of the best places to collect Instagram handles from your customers.
Shown below are two different implementation methods, one is using a Klaviyo Form, and the second is using Google Tag Manager.
If you're using Klaviyo, we highly recommend going with a Klaviyo Form as the form is free, very easy, and requires no coding or developer.
Full 2 minute video on using a Klaviyo Form + Gatsby on Shopify:
How to Add a Gatsby Connected Klaviyo Form To Your Shopify Order Confirmation Page:
Create a Klaviyo Form that is type: embed
Create a new Text Input field for Instagram handle, ie: "Your @Instagram"
Name the "Profile Property" for that field as exactly: instausername
Make sure you're also using the standard Email field in this form
Only form submissions that include both an Email & Handle will sync with Gatsby
If you're use a 2-step form, make sure Email and Instagram are on the same step
Click Publish on the form and you'll get an Embed Code like this:
If you're on Shopify or BigCommerce, follow Klaviyo's guide here to embed this form on your post purchase page.
In brief: Shopify Merchants go to Shopify >> Settings > Checkout > Order processing. Under Additional scripts, add the embed code for the Klaviyo Form you just created:
If you have our Gatsby Shopify App installed on this store, then you're done.
(For non-App users only):
If you created your Gatsby account manually, then you just need to add your Gatsby script above the Klaviyo Form embed code in the Additional Scripts:
You can get your Gatsby script by going to: Gatsby >> Install tab >> and clicking down anywhere in the black box to copy your unique Gatsby code into your mouse.
Your Gatsby code should look like this with your brand name in it:
Reach out to us in order to get your specific brand name.
And then you're done.
Please let us know if you have any questions. These instructions are very similar to connect Gatsby with a Klaviyo Popup form, the only difference is you don't need to add the Klaviyo Embed Tag.
Once this is done, be sure to sync your insights back to Klaviyo - only takes a minute.
Using a Custom Form Instead? Google Tag Manager Option:
Below is a custom Form connected to Gatsby via Google Tag Manager (guide).