HomeGetting StartedSolutionsPlatformsGlobal Integration
DocsRecipesAPI referenceChangelogAPI ReferenceRecipesChangelog
HomeGetting StartedSolutionsPlatformsGlobal IntegrationLog In
Docs

Set Up Google Tag Manager

Learn how to set up Google Tag Manager for your site to manage tracking, advertising, and other marketing functions on your site.

Suggest Edits

Prerequisites


Steps

1. Upload the Custom Template

  1. Download the template.tpl file from Github.

  2. Open Google Tag Manager.

  3. Click on the Templates tab.

  4. In the Tag Templates section, click New.

    In the Templates tab, a Tag Templates section contains a button called New.

  5. Click the three-dots icon to expand the menu.

  6. Click Import.

    Import option on menu

  7. Select the template.tpl file that you downloaded from Github in Step 1.

  8. Click Save.

2. Add a Tag

  1. Open Google Tag Manager for your Workspace.

  2. Click on the Tags tab.

  3. Click New.

    In the Tags tab, the Tag section features a New button.

  4. Click on the Tag Configuration section.

  5. In the Custom section, click Affirm.

  6. Click on the Triggering section.

  7. Select All Pages.

  8. Click Add.

    All pages are selected and Add button is shown

  9. Click Save to save the tag configuration.

3. Configure the API Key

  1. In the Tags section, click to open the tag.

  2. Click on the Tag Configuration section.

    Tag Confirmation section with Tag Type, Affirm Configuration, Payment Button, Logo Color, and Position subsections.

  3. In the Affirm Configuration sub-section, add your public API key in the Affirm Public API Key field.

  4. Select the type of API key you’re using:

    1. Sandbox for testing.
    2. Production to create actual loans.

4. Configure Promotional Messaging

You can add as-low-as messaging and logos to your site with minimal effort:

  • Promotional Message: This targets one element on a page.
  • List of Promotional Messages: This is for when there are similar elements on one page that you want to target. There must be the same number of instances of classes in the Target Element field that there are in the Price Element field.
  • Logo: This displays a logo anywhere on your site.

Add a Promotional Message

  1. Click the Promotional Messaging sub-section.
  2. Click Add Row in the Promotional Message row.
  3. In the Target Element field, select the HTML class or ID to identify where to display the promotional message.
  4. In the Price Element field, select the HTML class or ID of the element that includes the price.
  5. Select a Page Type to indicate where the promotional messaging should display.
  6. In the Affirm Type field, you can select either:
    • Logo: Displays the Affirm logo in promotional messaging. You can also choose a logo color.
    • Text: Displays “Affirm” as text in promotional messaging.
  7. Select a Position in Target option to indicate the position of promotional messaging relative to the Target Element.

Add a List of Promotional Messages

  1. In the Promotional Messaging sub-section, click Add Row in the List of promotional messages row.
  2. In the Target Element field, select the HTML class to identify where to display the promotional messaging.
  3. In the Price Element field, select the HTML class of the element that includes the price.
  4. Select a Page Type to indicate where the promotional messaging should display.
  5. In the Affirm Type field, you can select either:
    • Logo: Displays the Affirm logo in promotional messaging. You can also choose a logo color.
    • Text: Displays “Affirm” as text in promotional messaging.
    • Select a Position in Target option to indicate the position of promotional messaging relative to the Target Element.

5. Configure the Credit Card Form Fields

When the customer completes their Affirm checkout, we return them to your checkout page. At that time, a success callback function is triggered and the generated debit card details are included in the success callback event data.

To configure this checkout flow, you must:

  1. Store the virtual card details returned from Affirm.
    1. Populate hidden credit card form fields so they can be leveraged by the standard 'submit' action , or
    2. Immediately make the API call to tokenize the card, in anticipation of authorization in a subsequent step.
  2. Submit the in-progress checkout form on your site (either user-initiated or automatic).
    1. Customer must click the 'place/finalize/complete order' button to complete the order, or
    2. Automatically submit the checkout form after the Affirm checkout has been confirmed.
  3. Put a pending authorization hold on the funds on the virtual card.
    1. Use your checkout form's existing functionality to submit the debit card details to your card gateway for authorization.
    2. Directly submit the debit card details to your card gateway for authorization at runtime, instead of using the existing card-submit-for-authorization mechanism.

6. Configure Checkout

  1. In the Merchant Name field, enter the name of the merchant.
  2. In the following sections, enter HTML class or ID where the associated values are on the checkout page:
    1. Items. Note: The Item Container must be an element that surrounds the following fields.
    2. Billing.
    3. Shipping.
  3. In the Payment Button section, you can configure a button for the payment types section of your checkout:
  4. In the Target Element field, choose the HTML class to identify where the button should show.
  5. In the Payment Description field, you can customize the message. We suggest using Monthly Payments.
  6. In the next field, you can choose whether Affirm appears as a logo or text in the button.
  7. In the Logo Width field, enter the width that you’d like the logo to display as, in pixels. Don’t append “px” to the number (e.g., For 200 pixels wide, enter “200”).
  8. In the Color field, select a logo color.
  9. Select a Position option to indicate the position of promotional messaging relative to the Target Element.
  10. In the Card Output section, enter the HTML class or ID with the corresponding hidden credit card form fields.
  11. In the following fields, select the HTML class or ID where the amount is located:
    1. Shipping Amount
    2. Tax Amount
    3. Total Amount
  12. In the Submit Element field, choose the HTML class or ID of the button to submit an order.

7. Integrate

  1. Click the name of the container you’re currently editing, such as:

  2. GTM-WFLMNVK

    In the modal window, copy the embed code snippets for heading and body, and paste them into your page’s heading and body.

Install Google Tag Manager. First field is for HEAD code and second field is for BODY.
  1. For more information, you can refer to Google's quickstart guide.
  2. Test the integration by providing your Affirm contact with a test card number that can be successfully authorized. See an example on Github.

Updated 1 day ago