1. Advanced Billing
  2. Integrations
  3. Integrations

Google Analytics

The following collection of instructions is provided as a reference, and is provided as-is. You are responsible for ensuring it works properly on your page(s), as well as maintaining your connection with Google Analytics for the future. Any modifications you make to Google Analytics installation/integration, or modifications you make to code in similar sections, are your responsibility.

 

There are two methods to configure Google Analytics for Advanced Billing - choose which option best suits your needs and follow the step by step setup guide.

  1. Basic: Google Analytics integration with Advanced Billing:

    • Integrate Google Analytics with your Advanced Billing Public Signup Pages and/or your Advanced Billing receipt pages.

  2. Advanced: Cross domain tracking, goals, conversion rate funnels, and eCommerce tracking

    • Cross Domain Tracking: Tracks customers from your website (eg: your “buy now” page), to Advanced Billing’s Public Signup Pages, to Advanced Billing’s receipt page or your website’s Thank You Page.
    • Goals: Track Conversions on Advanced Billing’s receipt pages or your Thank You page
    • Conversation Rate Funnels: The Google Analytics funnel visualization report offers insight into your customers’ behavior as they travel through your complete sales funnel (this includes your website and Advanced Billing’s pages).
    • Ecommerce Tracking: Allows you to measure the number of transactions and revenue that your website generates for new signups.

Basic Integration with Google Analytics and Advanced Billing

Using this configuration, you will be able to integrate Google Analytics on Advanced Billing’s Public Signup Pages and/or Advanced Billing’s receipt pages.

Obtain your Google Analytics Tracking ID

  1. In Google Analytics, click Admin on the top menu.
  2. Under the PROPERTY column, click Tracking Info and then click Tracking Code.

Your Tracking ID will appear as UA-XXXXXXX-Y. Below is an example Tracking ID, yours will be different.

Example Tracking ID

ga1.png
Obtain/locate your GA tracking ID

Edit the tracking code and place it in Advanced Billing

In the Google Analytics tracking code below, replace the text “UA-XXXXXXX-Y” with your Tracking ID. Then, copy the code and paste it in your Advanced Billing custom JavaScript section of your Public Signup Pages. Put the code at the very bottom of your JavaScript – this ensures that if anything is wrong, you do not disable any other JavaScript you may have. If you already have similar Google Analytics code be sure to remove it. When you’re done, save your changes.

 
if ($('.public-signup-page').length !== 0) {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXXXXX-Y', 'auto');
    ga('send', 'pageview');
    }

Note: This code will function on your Advanced Billing Public Pages and receipt pages. We have purposefully disabled it from functioning on Advanced Billing Self-Service Pages.

Tip: Do not copy the tracking code from inside your Google Analytics account, because we have modified the tracking code to assist with the integration.

Test in real time

  1. In Google Analytics, click “Reporting”
  2. Click “Real-Time” and then click “Overview”
  3. Open one of your Advanced Billing Public Signup Pages that has your Google Analytics code
  4. In your Google Analytics account, you will see an active user appear (this may take up to a minute)

If you see an active user: You have successfully configured a basic Google Analytics integration with Advanced Billing.

If you do NOT see an active user: something is incorrect with your configuration. Repeat this section and try again. Common errors include using an incorrect tracking ID, having script tags in your code, or copy/pasting the tracking code directly from inside your Google Analytics account instead of using the modified tracking code listed in step 2 above, “Edit the tracking code and place it in Advanced Billing.”

tracking.png
Example of overview page where live-tracking is shown
 
Congrats! At this point, you have completed the "basic integration of Google Analytics. All instructions from this point further are for the advanced integration.

Advanced Google Analytics Configuration

Cross Domain Tracking, Goals, Conversion Rate Funnels, and Ecommerce Tracking

Add Google Analytics cross domain tracking, goals, conversion rate funnels, and eCommerce tracking to Advanced Billing to increase your reporting capabilities.

This is an advanced module. Please proceed with caution.

 

Common User Flows for Cross Domain

Use Google Analytics to track your visitors as they move from your website to Advanced Billing.

  • Your website -> Advanced Billing’s Public Signup Pages –> Advanced Billing’s receipt pages
  • Your website -> Advanced Billing’s Public Signup Pages –> Your website’s Thank You page
  • Advanced Billing’s Public Signup Pages –> Your website’s Thank You page

Get your Google Analytics Tracking Code

  1. In Google Analytics, click “Admin” on the top menu
  2. Under the PROPERTY column, click “Tracking Info”, and then Click “Tracking Code”.
  3. Your Tracking ID will appear as UA-XXXXXXX-Y.
Tip: This ID will be used in several future steps and it MUST be correctly used for your integration to work. Below is an example tracking ID, yours will be different.

ga2.png
Example tracking ID for familiarity

 

Create a New Property

This step is needed to utilize cross domain tracking. Use the image below to guide you through this step:

  1. In Google Analytics, click the Admin gear
  2. Choose your proper ACCOUNT
  3. Click “Create Property” (Note: You must have admin access in your Google Analytics account to create a new property.)
  4. Choose “Website”
  5. Enter “Advanced Billing” as the website name
  6. Choose “https” and enter “www.chargifypay.com” (this purposely does not include your Advanced Billing subdomain).
  7. Choose Industry Category - “Other”
  8. Choose your Reporting Time Zone
  9. Click “Get Tracking ID”
  10. You’re done. You do NOT need to take any further steps with the new tracking ID or tracking code that appears.

If you need help, read Google’s documentation on How to set up a property.


ga3__1_.png
Set up a new property

 

Define a Goal and Create A Sales Funnel

  1. Inside Google Analytics, click the Admin gear
  2. Under the PROPERTY section, select the correct property that matches the UA-XXXXXXX-Y tracking ID that you obtained in “Get your Google Analytics tracking code”
  3. Be sure your VIEW is set to “All Website Data”. Then, under the VIEW column, click “Goals”.
  4. Click “New Goal”
  5. Under Goal setup, choose “Custom” and click “Continue”
  6. Name your goal
  7. Skip “Goal Slot ID”
  8. Under Type, choose “Destination”
  9. Click “Continue”.
goals.png
Set up a new goal

goal1.png
Goal setup overview

If you are using Advanced Billing receipt pages, continue to on to the section below If you are using your own Thank You page on your website, continue to the next section, Your own thank you page..

Advanced Billing Receipt Pages

If you do not use your Advanced Billing’s receipt pages and instead you use your own Thank You pages, skip to section 2.2.

Do not include your domain name. If your funnel step URL is "www.mywebsite.com/home.html", only write "(/home.html)".

 

  1. In the “Goal details” section, under “Destination”, choose “Regular expression” (Regex) from the dropdown menu and enter the following Regex code:
    • .*\/subscribe\/.*\/show
  2. Leave value set to OFF (this allows for eCommerce tracking in a later section)
  3. Turn Funnel ON
    • This particular example below uses (/home.html) because our example “buy now” page is at www.mywebsite.com/home.html.
    • You will need to convert your page(s) into the proper regex by finding a unique string in your URL (such as /home.html) and converting it into regex by placing it between parenthesis.

      Enter a name for step 1 of the funnel, and enter the screen/page. This page will be the first page in your funnel. If you only want to count conversion rates for customers who begin on this step of the funnel, check “required”. All screen/page links must be written in regular expression. To make one of your URLs compatible with regular expression, place it inside parenthesis.

  4. Enter any other steps of the funnel that occur prior to the Advanced Billing Public Signup Page. Make sure each is in regex form.

  5. Enter the Advanced Billing Public Signup Page as the last funnel step using the following regex.

    (/subscribe/)

Do not include the Advanced Billing receipt page as the last funnel step. The last step should be the Advanced Billing Public Signup Page, as you have already defined your destination as the Advanced Billing receipt page.

 

  1. (Optional) Click “Verify this Goal” - This will only test the receipt page conversion rate within the last 7 days. It does not include the funnel steps.
  2. Click “Save”
ga6.png
Goal details steps summarized

Your own Thank You Page

If you have already completed the section on Advanced Billing Receipt Pages, and you do not use your own Thank You pages, you can skip this section.

ga7.png
Your own "Thank you" page setup
  1. In the “Goal details” section, under “Destination”:
    • choose “Regular expression” (Regex) from the dropdown menu and enter your Thank You page destination.
    • For example, if your Thank You page URL is “www.mywebsite.com/my-thank-you-page.html” you should enter “(/my-thank-you-page.html)”.
    • The parenthesis are needed to make your partial URL compatible with Regex.
  2. Leave value set to OFF (this allows for eCommerce tracking in a later section)
  3. Turn funnel ON
  4. Enter a name for step 1 of the funnel, and enter the screen/page. This page will be the first page in your funnel. If you only want to count conversion rates for customers who begin on this step of the funnel, check “required”. All screen/page links must be written in regular expression. To make one of your URLs compatible with regex, place it inside parenthesis.
    • This particular example below uses (/home.html) because our example “buy now” page is at www.mywebsite.com/home.html.
    • You will need to convert your page(s) into the proper regex by finding a unique string in your URL (such as /home.html) and converting it into regex by placing it between parenthesis.
    • Do not include your domain name. If your funnel step URL is “www.mywebsite.com/home.html”, only write “(/home.html)”.

      ga5.png

  5. Enter any other steps of the funnel that occur prior to the Advanced Billing Public Signup Page. Make sure each is in regex form.
  6. Enter the Advanced Billing Public Signup Page as the last funnel step using the following regex:
    • (/subscribe/)
  7. Do not include your Thank You page as the last funnel step. The last step should be the Advanced Billing Public Signup Page, as you have already defined your destination as your Thank You page.
    • (/subscribe/)
  8. (Optional) Click “Verify this Goal” - This will only test your Thank You page conversion rate within the last 7 days. It does not include the funnel steps.
  9. Click “Save”

Enable Ecommerce in Your Google Analytics Reports

  1. Inside Google Analytics, click “Admin” on the top menu
  2. Under the PROPERTY section, select the correct property that matches the UA-XXXXXXX-Y tracking ID that you obtained in the earlier step.
  3. Be sure your VIEW is set to “All Website Data”. Then, under the VIEW column, click “Ecommerce Settings”.
  4. Toggle Enable Ecommerce Status ON
  5. Leave Enable Related Products OFF
  6. Click “Next step”
  7. (Optional) Toggle Enhanced Ecommerce Settings ON. (In this article, we will opt to leave Enhanced Ecommerce Settings OFF)
  8. Click “Submit”

Edit The Ecommerce Tracking Code and Place the Code in Advanced Billing or Your Website

Advanced Billing Receipt Pages

If you do not use your Advanced Billing’s receipt pages and instead you use your own thank you pages, skip to the next section, Your own Thank You page.

Copy the following code and paste it in your Advanced Billing custom JavaScript for your Public Signup Pages. Put the code at the very bottom of your JavaScript - this ensures that if anything is wrong, you do not disable any other JavaScript you may have. If you already have similar Google Analytics code be sure to remove it. Be sure to edit the following text appropriately and save your changes.

  • Replace: UA-XXXXXXX-Y
  • Replace: Your Company Name
  • Replace: yourwebsite.com
 
if ($('.public-signup-page').length !== 0) {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['yourwebsite.com'] );

$(function() {
if ($('.public-signup-page__success').length === 1) {

var transaction_id = $('#analytics-signup-payment-id').html();
var total_revenue = $('#analytics-signup-revenue').html();
var currency = $('#analytics-currency').html();
var product_id = $('#analytics-product-id').html();
var product_handle = $('#analytics-product-handle').html();

ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': transaction_id,
'affiliation': 'Your Company Name',
'revenue': total_revenue,
'currency': currency
});
ga('ecommerce:addItem', {
'id': transaction_id,
'name': product_handle,
'sku': product_id,
'category': product_handle,
'price': total_revenue,
'quantity': '1',
'currency': currency
});
ga('ecommerce:send');
}
});
ga('send', 'pageview');
}

If you do not use your own thank you pages, skip to section on adding Google Analytics tracking code to any other pages.

Your own Thank You page

If you have already completed the section on receipt pages and you do not use your own thank you pages, you can skip to section on Adding Google Analytics Tracking to other pages.

  1. Insert your redirect URL and return parameters in Advanced Billing.

    • In Advanced Billing, edit your individual Public Signup Page
    • Enter your full thank you page URL under “Return URL after successful signup” (eg: http://www.mywebsite.com/my-thank-you-page.html)
    • Copy/paste the following snippet of code under “Return Parameters”

    transaction_id={signup_payment_id}&revenue={signup_revenue}&name={product_handle}&sku={product_id}

    • Save changes
    • Repeat this step for each relevant product in Advanced Billing

  2. Place the following code just before the </head> tag in your website’s thank you page. If you already similar Google Analytics code, be sure to remove it. Be sure to edit any fields as needed, such as currency and company name.

<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}

var transaction_id = getUrlVars()["transaction_id"];
var revenue = getUrlVars()["revenue"];
var name = getUrlVars()["name"];
var sku = getUrlVars()["sku"];

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['chargifypay.com'] );

ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': transaction_id,
'affiliation': 'My Company Name',
'revenue': revenue,
'currency': 'USD'
});
ga('ecommerce:addItem', {
'id': transaction_id,
'name': name,
'sku': sku,
'category': name,
'price': revenue,
'quantity': '1',
'currency': 'USD'
});
ga('ecommerce:send');
ga('send', 'pageview');
</script>

 

Add Google Analytics Tracking Code to Any Other Pages

Please note, this step is not necessary.

 

If you have other pages in your sales funnel that do not directly link to Advanced Billing and are not your Thank You page, put the typical Google Analytics tracking code in the relevant pages on your website.

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

 

Testing: Verify your Goals

  • In Google Analytics, click “Reporting”
  • Click “Real-Time” and then click “Conversions”
  • Perform a successful conversion by completing your sales funnel process
  • Under “Active Users” or “Goal Hits (Last 30 min)”, you should see your Goal Hits
  • This will confirm you have configured goals correctly.
  • Note: This does not confirm you have configured your sales funnel correctly

Testing: Verify your Sales Funnel

  • In Google Analytics, click “Reporting
  • Click “Conversions” -> “Goals” -> “Funnel Visualization
  • Perform a successful conversion by completing your sales funnel process (if necessary
  • Note: The funnel visualization chart can take up to 24 hours to populate data. Data may populate in pieces, so there may be temporary discrepancies as the data loads.
  • Tip: Make sure you are viewing the correct goal
ga9.png
Example Funnel Visualization Report

Testing: Verify Cross Domain Tracking

  • View your funnel visualization report from Step 5.2. If you can see a successful conversion of a user passing through your website to Advanced Billing (and, if applicable, back to your Thank You page), then you have successfully configured cross domain.
  • (Optional) View your Audience User Flow Report by going to “Reporting” -> “Audience” -> “User Flow”. This data takes approximately 24 hours to populate.
ga10.png
View your Audience User Flow Report

Testing: Verify your Ecommerce Tracking

  • In Google Analytics, click “Reporting”
  • Click “Conversions” -> “Ecommerce” -> “Overview”
  • Perform a successful conversion by completing your sales funnel process (if necessary)
  • Note: eCommerce tends to populate on a delay (10-15 minutes), and sometimes data takes longer to load. Data may populate in pieces, so there may be temporary discrepancies as the data loads.
ga11.png
Verify your Ecommerce Tracking

Additional Resources

<script>
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}

var transaction_id = getUrlVars()["transaction_id"];
var revenue = getUrlVars()["revenue"];
var name = getUrlVars()["name"];
var sku = getUrlVars()["sku"];

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['chargifypay.com'] );

ga('require', 'ecommerce');
ga('ecommerce:addTransaction', {
'id': transaction_id,
'affiliation': 'My Company Name',
'revenue': revenue,
'currency': 'USD'
});
ga('ecommerce:addItem', {
'id': transaction_id,
'name': name,
'sku': sku,
'category': name,
'price': revenue,
'quantity': '1',
'currency': 'USD'
});
ga('ecommerce:send');
ga('send', 'pageview');
</script>

Was this article helpful?
0 out of 0 found this helpful