CartHook tag integration

You can use the CartHook tag integration to add the Attentive tag to your website. This script provides the basic functionality that permits Attentive to track customer purchase events.

Additionally, you can add the Checkout Opt-In checkbox through CartHook, which allows you to capture marketing subscribers. If you’re interested in this option, contact our White Glove team (whiteglove@attentivemobile.com). Our team must provide a unique Attentive Checkout Opt-In gist, which you'll use in the Add the Checkout Opt-In option procedure.

Prerequisite

Contact our White Glove team (whiteglove@attentivemobile.com) or your Client Strategy Manager at Attentive for your organization's unique Attentive tag.

Add the Attentive tag using CartHook

Complete the following steps to add the Attentive tag to your CartHook pages:

1. Log in to your CartHook account.
2. Click your email address in the top-right corner and select Global Code.
   
3. Copy the snippet of code you received from White Glove in the Prerequisite section. For example, it will resemble the following:

   let attentiveScript = document.createElement('script');attentiveScript.type = 'text/javascript';
   
   attentiveScript.src = 'http://cdn.attn.tv/YOUR_SITE_HERE/dtag.js';document.getElementByTagName('body')[0].appendChild)(attentiveScript);

   Note that we replaced YOUR _ SITE _ HERE (as shown above) in the tag with your custom Attentive domain. For example: http://cdn.attn.tv/COMPANYNAME/dtag.js
4. Add the code to the following input fields on this page:
   • Landing page javascript
   • Checkout page javascript
   • Upsell page javascript
   • Downsell page javascript
   • Thank You page scripts
     
     Important! Don't add the Attentive javascript to the Global Javascript section.
     Your inputs should resemble the following:
     
5. Click Save Settings.

(Optional) Add the Checkout Opt-In option

After you complete the previous section to add the Attentive tag to your CartHook pages, you have the option to add the Checkout Opt-In checkbox. To do so, you must copy unique code and add it to your CartHook account.

Copy the unique code from the gist

Complete the following steps to copy the unique code:

1. Open the Attentive Checkout Opt-In gist provided by our White Glove team.
2. Copy and save the following snippets of code from the gist:
   • All of the code between <style> (the second row of the gist) and </style>. You'll add this to the Style (CSS), as described in the next procedure.
   • The remaining code starting with the line,
     <!-- insert HTML in body main__content section --> through to the end of the gist. You'll add this to the Template (HTML), as described in the next procedure.

Continue to the next section to add the code to your account.

Add the code to your CartHook account

1. Log in to your CartHook account.
2. Click your email address in the top-right corner and select Global Code.
3. Copy and paste the following code at the bottom of the Checkout page javascript field:

   let attentiveCarthookScript = document.createElement('script'); \
   
   attentiveCarthookScript.type = 'text/javascript'; \
   
   attentiveCarthookScript.src = 'https://cdn.attn.tv/checkout/carthook-checkout.js'; \
   
   document.getElementsByTagName('body')[0].appendChild(attentiveCarthookScript);`

4. Click Save Settings.
5. Navigate to the Checkout Page Templates page (or click Templates > Checkout Pages at the top of your dashboard).
6. Locate the template you want to implement with the Checkout Opt-In option.
7. (Optional) Select Duplicate design template to create an editable copy of a default CartHook template page.
8. Click the edit icon in the row of your template, as shown in the following image.
   
   The template appears in edit mode.
9. Click the </> icon in the left-side menu and the code editor appears, as shown in the following image.
   
10. Click Style (CSS) in the code editor and paste the gist code you saved above at the bottom of the window in the code editor.
11. Click Template (HTML) in the code editor and paste the gist code you saved above at the corresponding location in the HTML.
    Tip: Find the location on your page where you want to add the checkout opt-in. (We recommend adding it right after the phone input field in the Shipping Information section).
12. Click Apply code changes.