Before getting started:

  1. To complete this setup, you will need to request an API Secret from the Gatsby team. Please reach out to us to receive it.
  2. Add a field to a form on your website to collect instagram handles. Most common forms to add this field include: registration forms, checkout flows, and order confirmation pages. Take note of the name / ID for that Instagram field, as well as the name / ID for the Email Address field, as you will need both of those at the end. For example, those names / field IDs may be: "email" and "ig_handle".

Step 1: Create Tag Template

  • Please navigate to the tag template under the Template section in Google tag manager

Create new tag template and call it Gatsby Script Tag

  • Navigate to the Fields tab and add two "Text Input" fields and name them specifically EmailAddress and UserName
  • Add any Validation Rules via the gear icon
  • Then navigate to Code tab and place the below code right after the line where it says // "Enter Your Template Code Here" replacing what's already in there.

Note: also be sure to add your secret API key that you've received from us.

const sendPixel = require('sendPixel');
          const encodeUriComponent = require('encodeUriComponent');
          const log  = require('logToConsole');
          const secret = '[your "secret" api key, ask us for yours]';
          data.gtmOnSuccess();
// use the provided APIs to do things like send pixels
if (data.UserName && data.EmailAddress) {
         const url = 'https://gatsby.tech/tagmanager?email='+encodeUriComponent(data.EmailAddress)+'&username='+encodeUriComponent(data.UserName)+'&secret='+encodeUriComponent(secret);
          sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);
        }

  • Then navigate to the permission tab 
  • Hit "Refresh" if you see the option next to Template Preview

  • A new field will appear, "Sends Pixel"
  • Add the permission url https://gatsby.tech/* to the Sends Pixel field
  • Click Save on the top right

Step 2: Create Variable

  • Click X next to Template Editor / navigate back to the home view
  • Go into the Variables tab
  • Click "New" under User-Defined Variables
  • Name it EmailAddress on the top left and click the Pencil icon to choose the Variable Type
  • Choose Data Layer Variable
  • Set Data Layer Variable Name to EmailAddress
  • Click Down on Format Value and select Change Case to Lower Case
  • Click Save
  • Repeat those steps for UserName

Step 3: Create Trigger

  • Navigate to the Triggers Tab
  • Select New Trigger, name it Gatsby, and choose Form Submission
  • Click Save

Step 4: Create Tag

  • Navigate to the Tags tab, and create a new tag called Gatsby Script Tag
  • Select the pencil on Tag Configuration, and choose the tag type that we created in the first step "Gatsby Script Tag"
  • Click the + icons next to the empty fields and select their corresponding variables that we created, EmailAddress and UserName:

  • Under Triggering, click the pencil and select the trigger "Gatsby" that we created in the third step
  • Click save and you're done. If you didn't previously have GTM installed on your website, be sure to paste the standard GTM scripts in your website's header and body.

-- The below is only for brands that did not install Gatsby via the Shopify App Store after October 1st 2020) --

Step 5: Pass the variables from your website back to GTM by pasting the following code on your website:

On the submit action of the form fields, paste:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'EmailAddress': email,
'UserName': ig_handle
})

And just be sure to replace the bold fields with the specific names / IDs you created for the Instagram and Email Address fields in the form, as mentioned before step 1 at the top of this guide.

Let us know any questions!

Did this answer your question?