Connect Gatsby with Google Tag Manager

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: popup forms, 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. Remove the brackets though, just leave the single quotes around the API key

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!