πŸ“‘ Using Google Tag Manager for inserting FT CRM Scripts

If you want to use your Google Tag Manager for injecting the Site Integration Script / Inbox Script on your site you can do that.

1. Create a new user-defined variable in GTM

Google Tag Manager Custom Variable
Google Tag Manager Custom Variable

2. Create a new trigger

Create a "Page View - DOM Ready" trigger. Add additional filters such as url if you want. But it is important that the trigger is based on page vid AND DOM Ready.

3. Create a new tag with below code inside

Don't forget to replace your own values.

    
<script>
window.sid = "{{sid}}"; // REPLACE THIS ONE WITH THE GTM VARIABLE YOU ARE USING
window.fasttrackbrand = 'islandluck';
window.fasttrack = {
integrationVersion: 1.1,
autoInit: true,
enableEventTracking: false,
enablePendingRewards: false,
enableCrmIntegration: true,
inbox: {
enable: true,
badgeId: '#inbox-badge', // REPLACE THIS ONE WITH YOUR OWN VALUES (OR REMOVE IT IF NOT NEEDED)
navBarLogo: 'https://via.placeholder.com/150x150', // REPLACE THIS ONE WITH YOUR OWN VALUES (OR REMOVE IT IF NOT NEEDED)
contactEmail: 'info@example.com', // REPLACE THIS ONE WITH YOUR OWN VALUES
termsAboveButtons: false
},
translations: {
recieved: 'Recieved:',
validUntil: 'Valid until:',
questionsTop: 'Questions? Mail us at',
questionsShort: 'Questions:',
deleteMessagePrompt: 'Are you sure you want to delete this message?',
inboxEmpty: 'There is currently no messages in your inbox',
readMore: 'Read more'
}
};
var fastTrackCrmScript = document.createElement('script');
fastTrackCrmScript.async = true;
fastTrackCrmScript.onload = function () {
new window.FastTrackLoader();
};
// fastTrackCrmScript.src = 'https://crm-lib-staging.fasttrack-solutions.com/loader/fasttrack-crm.js'; // THIS ONE IS FOR STAGING
fastTrackCrmScript.src = 'https://crm-lib.fasttrack-solutions.com/loader/fasttrack-crm.js';
document.body.appendChild(fastTrackCrmScript);
</script>

Make the tag fire on your "Page View - DOM Ready" trigger.

3. Insert the script in your HTML / DOM

You might already be adding dataLayer variables. If you do so, please append the dataLayer with your sid variable (the custom variable you created in step 1) and add the corresponding value.

If you are not already adding dataLayer variables to GTM you need to include the following before initiating the Google Tag Manager on your page:

    
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'sid': 'XXX' // REPLACE THIS WITH A PROPER SID!
});
</script>
<!-- HERE WE THEN INITIATE GOOGLE TAG MANAGER SCRIPT! -->

And you're done! πŸ‘Œ

Debugging

Test user:

    
sid: 99999999-9999-9999-9999-999999999999-9999
UserId: -9999

If you want to debug in staging or production environment, you could deploy above script to production with the variable autoInit set to false. With that done, you can manually enable the inbox integration by putting this into the browser developer console:

    
window.FasttrackCrm.init();

After doing that the inbox integration will initiate with the sid variable defined. You can change the sid in runtime by setting the sid in the developer console before initiating it, like this:

    
window.sid = "99999999-9999-9999-9999-999999999999-9999";
window.FasttrackCrm.init();

#Sending demo message

You can send a demo message from the developer console (the script has to be initialized first!):

    
window.FasttrackCrm.demoMessage();

If you want to you can also set the data in the message yourself, like here:

    
// Event property can either be 'message' or 'shoutout'
window.FasttrackCrm.demoMessage({
Event: 'message',
Title: 'Title',
Message: 'Message body',
CTAButtonLink: 'https://www.google.com',
CTAButtonText: 'Primary button',
ImageUrl: 'https://via.placeholder.com/900x380',
CTAButton2Link: 'https://www.google.com',
CTAButton2Text: 'Secondary button',
Expires: '2020-05-05 10:00:00',
DisplayType: 'push', /* Can be 'silent' or 'push'. Only used when Event is 'inbox'. */
PreviewText: 'Preview text',
FooterText: 'Footer text',
});

☎️ Front end inbox actions

If you want to toggle the visibility of the inbox in the front end of your site, you can add this action on your inbox button in the main menu for example:

    
window.FasttrackCrm.toggleInbox();

πŸ‘” Override Styles

If you want to override the styles in the inbox, all styles should be wrapped within the CSS id #fasttrack-crm. That protects your sites CSS and allows you to easily target CSS classes in the inbox. Place a block of CSS above the invocation of the integration script.

Example:

    
<style type="text/css">
#fasttrack-crm .cta-button {
background-color:red;
color:black;
}
#fasttrack-crm .cta-button.secondary {
background-color:lime;
color:white;
}
</style>

πŸ”š API Endpoints

If you want you can build the front end for the inbox yourself. We list the required endpoints below.

GET /Notifications/v2/user-notifications?{filters}

Lists all notifications for an authenticated user. Use the querystring parameters to filter notifications:

Key

Values

Description

unread-only

true / false

Only return unread notifications

Response

    
{
"Data": [
{
"MessageId": 123,
"UserId": 123,
"Event": "message",
"Title": "Title",
"Message": "<div>This is message body</div>", // Can contain HTML
"PreviewText": "Preview text", // Cannot contain HTML
"FooterText": "<div>This is footer text</div>", // Can contain HTML
"Data": {}, // Extra fields for your usage
"CTAButtonLink": "https://www.example.com",
"CTAButtonText": "Click here!",
"CTAButton2Link": "https://www.example.com",
"CTAButton2Text": "Read more!",
"ImageUrl": "https://www.example.com/image.jpg",
"IsRead": true,
"Date": "2019-02-14 13:07:00",
"Expires": "2019-12-12 12:00:00"
},
...
],
"Success": true,
"Errors": []
}

GET /Notifications/v2/user-notification/:ID

Returns notification for the given id

Response

    
{
"Data": {
"MessageId": 123,
"UserId": 123,
"Event": "message",
"Title": "Title",
"Message": "<div>This is message body</div>", // Can contain HTML
"PreviewText": "Preview text", // Cannot contain HTML
"FooterText": "<div>This is footer text</div>", // Can contain HTML
"Data": {}, // Extra fields for your usage
"CTAButtonLink": "https://www.example.com",
"CTAButtonText": "Click here!",
"CTAButton2Link": "https://www.example.com",
"CTAButton2Text": "Read more!",
"ImageUrl": "https://www.example.com/image.jpg",
"IsRead": true,
"Date": "2019-02-14 13:07:00",
"Expires": "2019-12-12 12:00:00"
},
"Success": true,
"Errors": []
}

DELETE /Notifications/v2/user-notification/:ID

Marks specific notification as deleted. Deleted notifications won't be returned in endpoint for getting all notifications or endpoint for getting a specific notification.

Response

    
{
"Data": null,
"Success": true,
"Errors": []
}

POST /Notifications/MarkNotificationAsRead

Marks notification as read. Be aware this is a POST request. So you have to provide a post body looking like this:

Request

    
{
"MessageId": 123
}

Response

    
{
"Data": true,
"Success": true,
"Errors": []
}